Christopher Schmitt OREILLY' bhv V EDIȚIA RUSĂ Carte de bucate CSS A TREIA EDITIE Carte de bucate CSS Christopher Schmitt prefaţă de Dan Cederholm O'REILLY* Beijing • Cambridge • Farnham • Koln • Sebastopol • Taipei • Tokyo Christopher Schmitt REȚETE PGOGRAMAREA a -a editie „Ediția rusă” „BHV-Petersburg” UDC BBK - Sh Schmitt K SH CSS Rețete de programare Ed a III-a: Per din engleza - M : Editura „Ediția rusă”; Sankt Petersburg: BHV-Petersburg, - p : ill ISBN - - - - („Ediția rusă”) ISBN - - - - ("BHV-Petersburg") Cartea este dedicată tehnologiei Cascading Style Sheets (foi de stil în cascadă) Discută elementele de bază ale CSS, precum și instrumentele care oferă cele mai bune practici pentru dezvoltare: tipografie web, imagini, elemente de pagină, liste, linkuri și navigare, formulare, tabele, machete de pagină, tipărire de pagini web, trucuri de programare și proiectare cu CSS Organizată ca o referință utilă, a treia ediție va fi o referință excelentă pentru oricine lucrează cu CSS Spre deosebire de ediția anterioară, acoperă și Firefox , IE și Chrome Pentru web designeri și dezvoltatori de site-uri web UDC BBK - Pregătit pentru tipărire sub licență de la O'Reilly Media, Inc , Gravenstein Highway North, Sebastopol, CA Nutshell Handbook și O'Reilly sunt mărci comerciale sau mărci comerciale înregistrate ale O'Reilly Media, Inc în SUA și/sau în alte țări Toate celelalte mărci comerciale sunt proprietatea companiilor respective Toate numele de companii, organizații, produse și persoane utilizate în exemple sunt fictive și nu au nicio legătură cu companii, organizații, produse sau persoane reale Christopher Schmitt CSS Rețete de programare a -a ed Traducere din engleză de Tatyana Korotyaeva Un proiect comun al editurii „Russian Edition” și al editurii „BHV-Petersburg” II EDIȚIA RUSĂ ID licență nr din Semnat pentru publicare la Format x '/| Imprimare offset Conv cuptor l Tiraj exemplare Ordinul nr Concluzie sanitară și epidemiologică pentru produse Nr D din mai emisă de Serviciul Federal de Supraveghere a Protecției Drepturilor Consumatorului și Bunăstare Omului Tipărit din folii transparente gata făcute la Întreprinderea Unitară de Stat „Imprimeria” Nauka „ , Sankt Petersburg, linia , ISBN - - - - ISBN - - - - („Ediția rusă”) ISBN - - - - ("BHV-Petersburg") Despre ediția originală în limba engleză, O'Reilly Media, Inc , , , C Traducere în rusă, editura BHV-Petersburg, О Proiectare și pregătire pentru publicare, editura „BHV-Petersburg”, editura „Ediția rusă”, Cuprins Cuvânt înainte Introducere cincisprezece Pentru cine este această carte? Ipotezele făcute în carte Conținutul cărții optsprezece Convenții utilizate în carte Utilizarea codului exemplu douăzeci Contactarea lui O'Reilly Cărți online Safari® Mulțumiri Capitolul Utilizarea elementelor HTML de bază Selectarea unui editor de text Codificarea unei pagini HTML simple Despre DOCTYPE și efectul acestuia asupra aspectului paginilor dintr-un browser Web Aspectul antetului Citare adecvată Inserarea unei imagini Încorporarea fișierelor audio cu HTML Încorporarea video utilizând HTML Utilizarea eficientă a noului puternic Crearea listelor Generarea unui link către o pagină web Dispunerea tabelului Crearea unui vCard (hCard) folosind HTML Markup eveniment (hCalendar) Verificarea validității marcajului HTML Capitolul Noțiuni de bază CSS Aplicarea regulilor CSS la o pagină web Aplicarea selectoarelor de bază pentru stilizare Utilizarea selectoarelor directe de descendenți Aplicarea selectoarelor de vecini Aplicarea selectoarelor de atribute Utilizarea pseudo-claselor Utilizarea pseudo-elementelor Când să folosiți selectoarele de clasă și selectoarele de identificare Despre proprietățile CSS Cuprins Înțelegerea modelului cutiei Asocierea stilurilor cu o pagină web Despre sursele CSS Ordinea de sortare a regulilor în CSS Utilizarea limportant pentru a suprascrie regulile CSS individuale Definiția specificității Cum să aplicați diferite tipuri de foi de stil Inserarea comentariilor în tabelele CSS Organizarea informațiilor într-o foaie de stil Lucrul cu proprietăți de scurtătură Specificarea unei foi de stil alternative Aplicarea unui model plutitor Aplicarea alinierii automate elementelor plutitoare Aplicarea poziționării absolute Aplicarea poziționării relative Utilizarea poziționării interblocate Crearea unui teanc de elemente folosind indexul z Verificarea regulilor CSS Capitolul Tipografia web Specificarea fonturilor Aplicarea fonturilor sigure pentru web Specificarea unui ampersand stilizat Încorporarea fișierelor cu fonturi Ruperea forțată a cuvintelor cu adevărat lungi Setarea dimensiunilor fontului Obținerea unei potriviri mai mari a dimensiunii fontului în diferite browsere web Setarea cratimelor, liniuțelor em și liniuțelor en Centrarea textului Setarea justificării textului Indicarea textului redundant cu puncte de suspensie Eliminarea spațiului alb dintre titluri și paragrafe Specificarea unei limite simple Formarea unui capac de cadere mai mare, centrat, ridicat Design decorativ al unei litere inițiale în relief folosind o imagine Crearea unui titlu cu text stilizat Crearea unui titlu cu text stilizat și un cadru Stilizarea unui antet cu text și o imagine Crearea unui cadru în text HTML Poziționarea crestăturii pe partea laterală a coloanei Crearea unui cadru încadrat Crearea cadrelor de imagine Stabilirea unei liniuțe pe primul rând al unui paragraf Setați o liniuță pentru un paragraf întreg Crearea unei indentări Stilizarea primului rând al unui paragraf Stilizarea primului rând al unui paragraf cu o imagine Cuprins Crearea unui efect de text selectat Schimbați culoarea atunci când este selectat text Schimbarea spațierii liniilor Adăugarea graficelor text HTML Inserarea unei umbre în spatele textului Ajustarea spațiilor de litere și cuvinte Realizarea liniilor de bază ritmice în tipografia web Stilizarea superindicelor și a subscriptelor fără a întrerupe linia de bază Afișarea mai multor coloane de text Capitolul Imagini Conversia imaginilor color în alb-negru folosind CSS în IE Adăugarea unui cadru în jurul imaginii Stabilirea unui cadru rotunjit în jurul imaginii Eliminarea chenarelor implicite din jurul imaginilor în unele browsere web Setarea imaginii de fundal Crearea unei benzi de imagini de fundal Plasarea unei imagini de fundal Aplicarea mai multor imagini de fundal într-un singur element HTML Aranjarea imaginilor pe cadrul bloc Crearea unei imagini de fundal fixate Redimensionarea imaginii la redimensionarea ferestrei Browser web Întinderea unei imagini pentru a se potrivi în întreaga fereastră a browserului web Crearea de imagini scalabile Specificarea modului în care sunt redate imaginile în browser-ul Web Rotirea imaginilor cu CSS Setarea gradienților cu CSS Se creează imagini PNG transparente pentru IE și mai târziu Aplicarea fișierelor PNG cu transparență utilizând JavaScript Suprapunerea textului HTML pe o imagine Înlocuirea textului HTML cu o imagine Crearea unei vederi panoramice a unei imagini Combinarea diferitelor formate grafice Colțuri rotunjite pentru coloane cu lățime fixă Colțuri rotunjite (metoda ușii glisante) Colțuri rotunjite (Metoda vârf de munte) Rotunjirea colțurilor cu JavaScript Inserarea unei umbre dintr-un element folosind CSS Inserarea unei umbre în spatele unei imagini Inserarea unei umbre anti-alias în spatele unei imagini Crearea de înștiințări cu text Cum să împiedicați oamenii să vă fure imaginile Inserarea automată a reflexiilor în imagini Aplicarea imaginilor Sprite Decuparea imaginilor de fundal Aplicarea măștilor imaginilor și cadrelor opt Cuprins Capitolul Elementele paginii Eliminarea marginilor paginii Resetarea stilurilor implicite de browser web Colorarea cu bara de defilare în IE Tehnici de centrare a elementelor pe o pagină web Crearea unui cadru de pagină Afișarea unui chenar în jurul ferestrei de vizualizare a browserului web Reglarea separatorului orizontal Adăugarea unei imagini Lightbox View Modificarea opacității elementelor Reglarea opacității culorii de fundal Capitolul Liste Modificarea formatului listei Schimbarea culorii marcatorului de listă Specificarea indentărilor în listă care sunt afișate în același mod în diferite browsere Web Setarea separatoarelor între elementele din listă Crearea marcatoarelor de text personalizate în liste Crearea marcatorilor de imagini personalizate în liste Inserarea marcatorilor mari de imagine personalizată în liste Îmbunătățirea vizualizării Listă cu grafice Crearea listelor inline Crearea indentărilor într-o listă Deplasarea marcatorului în interiorul listei Stilul listei de definiții Afișare tradițională a scenariului folosind elementul limbaj HTML dialog Transformarea unei liste într-un arbore de director Stabilirea unui sistem de evaluare cu stele Capitolul Legături și navigare Creați cu ușurință meniuri text și submeniuri Eliminarea legăturilor de subliniere și a altor trucuri de stil Schimbarea culorii link-urilor Eliminați liniile întrerupte când faceți clic pe linkuri în Internet Explorer Modificarea culorii legăturilor în diferite secțiuni ale paginii Afișarea pictogramelor la sfârșitul legăturilor de diferite tipuri Schimbarea cursorelor Schimbați aspectul unui link la trecerea cursorului fără JavaScript Animați legăturile cu proprietăți de tranziție CSS la trecerea cursorului soareci Creați meniuri text de navigare și imagini vizuale cu mouse-ul cursorul mouse-ului către elementele sale Inserarea submeniurilor în meniurile verticale Crearea meniurilor de navigare orizontală Crearea meniurilor de navigare orizontale cu meniuri derulante Crearea unui meniu de navigare cu taste de acces Crearea tranzițiilor cu legături de lanț Cuprins nouă Creați efecte vizuale de hover cu imagini faceți clic pe link Crearea meniurilor pliabile Crearea meniurilor contextuale Crearea de sfaturi cu instrumente utilizând atributul Titlu Dezvoltarea unui meniu dinamic din marcaje Schimbarea stilurilor de legături de ancorare Capitolul Formulare , Modificarea spațiului alb din jurul unei forme Eliminarea spațiului alb din jurul unui formular Stilul elementelor de intrare Modificarea stilurilor elementelor de formular când faceți clic pe ele Aplicarea de stiluri diferite la diferite elemente de intrare în același formular Atribuirea stilurilor elementelor din zona de text Elemente de selectare și opțiune de stil Crearea unei casete de căutare în stil Macintosh Stiluri de butoane de formular Crearea unei imagini pentru butonul de trimitere Setarea butonului Submit-Once-Only Crearea unui buton de trimitere ca text HTML Cum să faci un link text HTML să acționeze ca un buton Trimitere Proiectarea unui formular Web fără tabele Proiectarea unui formular cu două coloane fără a utiliza tabele Includerea informaţiilor pentru utilizatori în formularul Stilizarea cheilor de acces în formularele Web Gruparea elementelor de formular comune Introducerea datelor într-un formular de foaie de calcul Exemplu de proiectare: Formular simplu de înregistrare Exemplu de proiectare: Formular de înregistrare Capitolul Setarea chenarelor și a umpluturii în celule și tabele Specificarea cantității de spațiu liber din jurul unei celule Setarea stilului de titlu Setarea stilurilor în celulele tabelului Setarea stilurilor pentru elementele antetului tabelului Eliminarea golurilor din imaginile plasate în celulele tabelului Eliminați golurile dintre celulele tabelului Crearea culorilor de fundal alternative în rândurile de tabel Crearea unui efect de evidențiere a rândurilor de tabel Exemplu de proiect: Calendar elegant Capitolul Proiectarea paginilor web pentru tipărire Aplicarea unei foi de stil de imprimare pe o pagină Web Schimbarea unei sigle color în alb-negru la imprimarea paginilor web Crearea unui formular Web gata de imprimare Afișarea URI-urilor după legături Inserarea caracterelor speciale înaintea legăturilor Cuprins Inserarea într-un document pentru a imprima întreruperi de pagină Exemplu de design: versiunea imprimabilă a paginii creată cu CSS Capitolul Aspecte de pagină Crearea unui aspect cu o singură coloană Crearea unui aspect cu două coloane Construirea unui aspect cu două coloane cu coloane cu lățime fixă Crearea unui layout multicoloan fluid folosind un model plutitor Creați un aspect cu trei coloane folosind un model plutitor lățime fixă Crearea unui aspect cu mai multe coloane fluid folosind poziționarea Crearea unui aspect cu mai multe coloane cu coloane folosind poziționarea lățime fixă Utilizarea unui model plutitor pentru a afișa coloanele într-un mod arbitrar bine Proiectarea unui aspect asimetric Proiectarea layout-urilor agnostice de rezoluție Capitolul Trucuri de programare, trucuri și depanare Suprascrierea stilurilor inline Diagnosticarea erorilor CSS și a problemelor cu browserul web Utilizarea bookmarklet-urilor pentru a găsi erori Utilizarea extensiilor de browser web pentru a găsi erori Remediere Internet Explorer Remedierea Internet Explorer cu JavaScript Folosirea comentariilor condiționate pentru a transmite stiluri peste versiuni Internet Explorer Aplicarea filtrelor CSS pentru a transmite reguli aproape oricui Browser web Instalarea sistemului de transfer inteligent CSS pentru Modern Browsere web Testarea designului site-ului web pe mai multe platforme cu un singur calculator Verificarea unui site Web utilizând un browser Web de tip text Capitolul Proiectarea cu CSS Creștere semnificativă a dimensiunii fontului Crearea unei combinații neașteptate Combinarea elementelor diferite pentru a crea contrast Atragerea ochiului cu contrast Verificarea contrastului de culoare suficient Sublinierea unui citat cu citate spectaculoase Setarea unei scene de fundal în mișcare atunci când este schimbată de utilizator dimensiunea ferestrei Inserarea de animații în elemente de pe o pagină Crearea unui foc de artificii atunci când utilizatorul derulează pagina Personalizarea foii de stil pentru vizualizarea sursă în Firefox Proiectarea cu o grilă (Seturi CSS) Cuprins unsprezece Exemplu de design: proiectare web conectată Exemplu de design: Steagul SUA Capitolul Interacțiunea cu JavaScript Verificarea dacă JavaScript este activat într-un browser web Aplicarea diferitelor foi de stil în funcție de momentul zilei Redirecționați către site-ul mobil în funcție de lățime Ecranul browserului web Încorporarea unei biblioteci JavaScript într-o pagină web Aplicarea selectoarelor CSS în IE și IE Crearea unui tabel HTML cu colorare zebră folosind JavaScript Evidențierea unui rând de tabel cu o culoare când treceți cursorul mouse-ului Proiectarea vizuală a unui simplu deplasare a cursorului mouse-ului Formarea unui rând de aceeași înălțime din elemente cu cantități diferite de conținut Specificarea unui link care deschide o fereastră nouă Faceți clic pe un întreg element div Suport Javascript pentru PNG în IE Furnizarea de cod HTML și proprietăți CSS browserelor web, capabil să le prelucreze Anexa Surse Tutoriale de bază legate de limbajul HTML și tehnologia CSS Resurse de proiectare Grupuri de discuții Materiale de referinta Software Anexa Proprietăți CSS și completări specializate Anexa Selectoare, pseudo-clase și pseudo-elemente CSS Anexa Selectoare și pseudo-clase CSS Anexa Elemente de modelare a formularului Index de subiecte cuvânt înainte Un bucătar priceput vă va spune că cheia unei mâncăruri grozave sunt ingredientele de înaltă calitate Autorul, Christopher Schmitt, a cumpărat deja totul pentru tine Compilând sute de rețete CSS într-o singură carte, vă oferă un magazin unic unde puteți selecta toate ingredientele de care aveți nevoie pentru a crea pagini web elegante și flexibile Când am început să învăț dezavantajele CSS, încercarea și eroarea era principalul meu mijloc de a înțelege posibilitățile creative ale acestei tehnologii: „Aș dori să transform această listă într-un meniu de navigare orizontal” sau „Trebuie să ofer clientului Stilul CSS al elementelor de formular ” Câteva ore, dacă nu zile, au fost petrecute conectând diverse reguli, ștergând unele dintre ele și testând un număr infinit de combinații Această abordare bazată pe noroc a funcționat (uneori) dar cu siguranță a consumat timp, chiar dacă eu, fiind o persoană curioasă, mi s-a părut chiar fascinantă Mi-aș dori să am o carte ca asta În loc să trebuiască să trec prin bătaia de cap de a stila fiecare element de pe pagină, aș putea derula prin CSS, programarea rețetelor, găsirea rețetei și începerea gătitului Munca la întâmplare ar fi exclusă și aș putea face ceea ce îmi place cel mai mult: să scriu Structura modulară a cărții o face o referință indispensabilă pentru designerii și dezvoltatorii de toate nivelurile Rezolvând probleme, de la gestionarea tipografiei, legăturilor și navigației până la machete de pagină completă, Christopher nu numai că explică clar cum să folosești stilurile pentru a îndeplini o anumită sarcină, dar subliniază și problemele care pot fi asociate cu anumite browsere web Împreună cu sfaturi și trucuri utile pentru sarcinile de zi cu zi, vă oferă cunoștințele esențiale de care aveți nevoie pentru a deveni un designer CSS de succes De exemplu, un articol recent a discutat despre o problemă comună de practică și comoditate: dacă un buton Trimitere este afișat la sfârșitul unui formular, unii utilizatori nu pot rupe obiceiul de a face dublu clic Butonul poate fi „clic” de două ori, rezultând o trimitere duplicat a formularului Ce sa fac? Articolul menționat mai devreme nu a oferit nicio soluție În această carte, nu este surprinzător, a existat o rețetă pentru a rezolva această mică problemă cu CSS cu un strop de JavaScript Și acesta este scopul principal al acestei cărți: probleme reale și mijloace care vor aduce rezultate reale Probabil ați auzit despre cum se îmbunătățește tehnologia CSS Cuvânt înainte viață, facilitând întreținerea și întreținerea paginilor Este timpul să profitați de asta și, cu această carte, veți avea o scuză mai puțin pentru a nu face acest lucru Așa că sfatul meu este să eliberați o parte din birou, deoarece cartea „CSS Rețete de programare” va ocupa un loc permanent pe ea Din fericire pentru tine, va fi ușor de ajuns cu mâna dacă este necesar Dan Cederholm Fondator al Simplebits Salem, Massachusetts (http://www simplebits com) Introducere Fiecare carte are o poveste, chiar și cărțile de web design Această carte este despre Cascading Style Sheets (Cascading Style Sheets) sau CSS (abrevierea folosită în mod obișnuit pentru a se referi la aceasta) CSS este o sintaxă simplă, standardizată, care oferă designerilor control complet asupra aspectului vizual al paginilor lor Web și este o componentă esențială a designului web modern În comparație cu instrumentele de dezvoltare din anii Astăzi, datorită CSS, web designerii au mai mult control asupra designului unui site Web și petrec mai puțin timp editând și întreținându-l De asemenea, CSS împinge limitele designului web tradițional, permițându-vă să proiectați și să controlați modul în care arată o pagină Web atunci când este tipărită Simplitatea tehnologiei Cascading Style Sheets constă în faptul că nu este nevoie de hardware sau software special pentru a le aplica Cerințele de bază sunt un computer, un browser web modern, cum ar fi Firefox, Safari sau Internet Explorer pentru Windows (care sunt doar exemple) și editorul de pagini web preferat Ca acesta din urmă, puteți utiliza orice program de editare, de la Notepad pe computere Windows sau TextEdit pentru computere Macintosh la avansat, cu tehnologie WYSIWYG (What You See Is What You Get, what you see is what you get), editor Adobe Dreamweaver în mod pagina afișarea codului Acum că știi despre ce este vorba în această carte, hai să-i spun povestea Unii cred că designul web a început când Tim Bemers-Lee, creatorul World Wide Web, a format primul set de pagini web Alții ar putea spune că a apărut atunci când eticheta centrală a fost introdusă ca parte a extensiilor HTML (HyperText Markup Language) ale Netscape Oricât de ironic ar părea, tind să cred că adevăratul design web a venit din cărți Primele cărți care au contribuit la creșterea activității pe Internet în anii au fost Lynda Weinman, prima carte color despre grafică web, „Designing Web Graphics”, publicată în ianuarie , și cartea lui David Siegel (David Siegel) „Crearea Killer Web Sites" (Crearea de site-uri web uimitoare), publicată în același an câteva luni mai târziu Aceste cărți au inițiat schimbări revoluționare ale World Wide Web, împreună cu producătorii de tehnologie care au făcut posibile astfel de schimbări Introducere Din păcate, metodele descrise în ele, fiind avansate la vremea lor, sunt acum depășite Când am scris aceste rânduri, au trecut ani de la publicarea acestor cărți; CSS a fost introdus în același an în care au fost publicate primele cărți de design web ale lui Weinman și Siegel despre etichete de font, tabele imbricate și GIF-uri cu un singur pixel De atunci, CSS a parcurs un drum lung Abia acum, după ani de dezvoltare și dezvoltare a CSS, odată cu apariția și adoptarea pe scară largă a browserului web Internet Explorer pentru Windows, designerii web, dezvoltatorii și utilizatorii obișnuiți de browser web pot folosi tehnologia CSS la întregul său potențial Pe lângă IE , alte browsere Web și-au făcut simțită prezența, depășind adesea Internet Explorer în ceea ce privește suportarea de noi caracteristici și funcționalități Browserele web Firefox, Safari, Chrome și Opera implementează cele mai recente specificații CSS și HTML de îndată ce acestea sunt discutate de membrii grupurilor de lucru World Wide Web Consortium (W C) Dacă sunteți serios să creați site-uri web moderne, utilizabile și de ultimă generație, utilizați tehnologia CSS și această carte cu o colecție de soluții CSS pentru problemele comune de design web Ele vă vor ajuta să contribuiți la istoria designului web Pentru cine este această carte? Aceasta este o carte pentru designerii și dezvoltatorii web care se confruntă cu probleme de design CSS Cu ajutorul acestuia, dezvoltatorii web vor putea rezolva sarcini comune legate de proiectarea paginilor Web prin foi de stil în cascadă „CSS Rețete de programare” este ideal pentru cei care ar dori să folosească CSS în proiecte Web, dar încearcă să evite să învețe noi tehnologii Dacă sunteți acest tip de cititor, utilizați de fiecare dată o soluție din carte Folosiți-o ca un ghidați-vă și contactați-l atunci când aveți nevoie de o nouă metodă sau de un artificiu și sunteți gata să o învățați Chiar dacă vă considerați un expert CSS, dar nu cunoașteți elementele de bază ale designului, această carte este utilă pentru a o păstra lângă computer Acesta acoperă elemente de design, de la elementele de bază ale tipografiei Web până la aspectul paginilor și include un capitol despre tehnici de design exemplare care vă pot îndruma în direcția corectă Ipoteze din carte Cartea face câteva presupuneri despre tine, dragă cititor Unul dintre NCC este că aveți o anumită experiență în design și dezvoltare web ca amator, student sau profesionist „CSS Rețete de programare” nu este o introducere în tehnologia CSS sau o descriere detaliată a implementării CSS în diferite browsere web, așa că oamenii, începeți Introducere Cei care studiază tehnicile de design și dezvoltare web le poate fi mai dificil decât o descriere generală și completă a fundamentelor teoretice ale CSS Dacă sunteți în căutarea unui studiu detaliat al specificației CSS, ar trebui să consultați Cascading Style Sheets: the Definitive Guide, Third Edition de O'Reilly Media, de la Eric Meyer Va fi un mare plus pentru această carte Dacă utilizați programe precum Adobe Dreamweaver numai în vizualizarea WYS WYG (What You See Îs What You Get, What You See Is What You Get) sau Design și ați întâlnit rar markup în Code View, este posibil să aveți probleme, deoarece va trebui să abandonați imediat majoritatea exemplelor propuse în carte Pentru o introducere în elementele de bază ale codării manuale în HTML, consultați cartea „Learning Web Design” de Jennifer Niederst Robbins (O'Reilly Media) Deși instrumentele WYS WYG vă permit să creați modele folosind CSS, unele dintre ele nu se ocupă de metodele originale prezentate în această carte și pot cauza probleme dacă încercați să implementați aceste metode în timp ce editați pagini numai în modul WYSIWYG Pentru a profita din plin de soluțiile din această carte, trebuie să puteți edita manual tabelele HTML și CSS O parte din codul din această carte poate fi recreat utilizând o aplicație de creare a paginii Web condusă de casete de dialog, dar pot apărea probleme pe parcurs O altă presupunere este că designerii și dezvoltatorii web pricepuți în crearea de pagini cu aspect de tabel HTML, etichete de font și imagini GlF cu un singur pixel vor găsi această carte atât utilă, cât și frustrantă Pentru web designerii care practică tehnici precum aceste vechi moduri de proiectare, tehnologia CSS va părea descurajantă Există încă o afișare nu întotdeauna corectă a paginilor Web (așa-numitul „browser hell”), adesea asociată cu dezvoltarea browserului web, în care creatorii săi au avut tendința de a interpreta specificația CSS în felul lor sau nu au făcut-o pe deplin implementează-l volum Sentimentele de nemulțumire sunt o parte firească a procesului de învățare Învățarea de a proiecta cu CSS ar trebui abordată cu răbdare și simțul umorului Din fericire, dezvoltatorii marilor browsere web par să fi rezolvat problema Versiunile moderne de browser par să fi implementat corect CSS, dar încercarea de a menține compatibilitatea cu browserele web mai vechi sau mai puțin populare poate fi totuși o provocare Cu toate acestea, beneficiile utilizării CSS, inclusiv un control mai mare asupra aspectului și simțului unei pagini Web și tehnică mai simplă Eric A Meyer CSS Foi de stil în cascadă Ghid detaliat - Sankt Petersburg: Symbol-Plus, - Notă ed optsprezece Introducere întreținerea site-urilor Web cu mai multe pagini depășește supărările asociate cu arbitrariul browserelor Web Deoarece cartea conține mai multe soluții care utilizează limbajul JavaScript și biblioteca JavaScript, jQuery, se presupune că aveți cunoștințe de bază despre limbajul de scripting, precum și abilitățile de a include corect codul JavaScript într-un document Web Dacă acesta este un obstacol, vă recomandăm să descărcați codul de pe site-ul Web O'Reilly pentru a vedea exemplul de lucru original Pe de altă parte, dacă sunteți în căutarea unei cărți care relegă CSS într-un rol secundar în JavaScript, consultați „Cartea de gătit JavaScript și DHTML” a lui Danny Goodman (Cartea de gătit JavaScript și DHTML) (O' Reilly Media) Ca o ipoteză finală, aveți nevoie de o sursă care să ofere remedieri rapide la problemele comune de proiectare web CSS Soluțiile oferite, care acoperă totul, de la tipografia Web până la aspectul paginilor cu mai multe coloane, sunt compatibile cu browserele Web moderne cu numere de versiuni mai mari sau egale cu , cu excepția browserelor Web Safari și Chrome Ori de câte ori este posibil, subliniez că o metodă sau alta poate cauza probleme în browserele Web moderne Deși cartea include un capitol despre trucuri de programare și trucuri artificiale pentru ascunderea foilor de stil din browserele Web cu implementări slabe ale specificației complete CSS, cartea nu garantează design-uri perfecte, perfecte în pixeli în toate browserele Web Chiar și cu metodele tradiționale de design web, acest lucru nu a fost realizat niciodată din anii (a se vedea http://dowebsitesneedtolookexactlythesameineverybrowser com/ pentru mai multe informații) Conținutul cărții Pentru mine, cel mai bun mod de a folosi o carte ca aceasta este să o stăpânesc deschizând-o din când în când când încerc să rezolv o anumită problemă, ceea ce am făcut cu prima ediție a ei când am scris aceasta când aveam nevoie să o reîmprospătez memoria mea Poate fi util în acest scop dacă se află pe sau lângă desktopul dezvoltatorului Web, întotdeauna la îndemână pentru a rezolva o problemă de CSS sau de design Web Totuși, nimic nu te împiedică să citești această carte de la prima până la ultima pagină Mai jos este o scurtă prezentare a conținutului fiecărui capitol ♦ Capitolul , „Utilizarea elementelor HTML de bază”, discută soluții bazate pe marcarea conținutului semantic ♦ Capitolul , „Elementele fundamentale ale CSS”, discută elementele de bază ale CSS, precum și unele dintre cele mai bune instrumente de dezvoltare Goodman D JavaScript și DHTML Culegere de retete - Sankt Petersburg: Peter, Introducere nouăsprezece ♦ Capitolul , Tipografia Web, descrie cum să utilizați CSS pentru a seta fonturi pe o pagină Web, titluri, bare laterale, indentări și multe altele ♦ Capitolul , Imagini, discută instrumentele CSS direct legate de aplicarea stilurilor și proprietăților legate de grafica Web ♦ Capitolul , „Elemente de pagină”, reunește o colecție de subiecte neînrudite care nu sunt neapărat relevante pentru un anumit capitol, dar toate afectează designul paginii în ansamblu Soluțiile din acest capitol includ centrarea elementelor, setarea unei imagini de fundal, plasarea unui chenar de pagină și alte ajutoare pentru stil ♦ Capitolul , Liste, descrie diferitele opțiuni de stil pentru elementele din listă Soluțiile includ probleme de compatibilitate între browsere la afișarea indentărilor de text, crearea de indentări, inclusiv imagini personalizate ca marcatori de listă și multe altele ♦ Capitolul , Legături și navigare, vă arată cum să utilizați CSS pentru a controla prezentarea legăturilor și a seturilor de legături Capitolul include atât soluții simple, cum ar fi eliminarea sublinierii legăturilor, cât și soluții mai avansate, cum ar fi crearea unui meniu vizual dinamic ♦ Capitolul , „Formulare”, discută trucuri artificiale pentru a depăși deficiențele metodelor standard de redare a formularelor în browserele web Soluțiile sugerate în acest capitol includ stilarea elementelor de formular, setarea butonului Trimitere cu un singur clic și stilizarea formularului de înregistrare, printre altele ♦ Capitolul , Tabele, vă arată cum să stilați tabelele HTML În timp ce CSS poate ajuta la eliminarea necesității de modele bazate pe tabel HTML, există momente când trebuie să stilați datele tabulare, cum ar fi calendare sau statistici Acest capitol include soluții pentru setarea umpluturii celulelor tabelului, eliminarea golurilor din celulele tabelului la inserarea imaginilor și stilizarea calendarului ♦ Capitolul , „Proiectarea paginilor web pentru imprimare”, oferă informații despre stilurile utilizate la tipărirea paginilor web Soluțiile discutate în acest capitol includ generarea unei foi de stil separate pentru imprimarea unei pagini Web, stilarea formularelor Web și inserarea unui URL (Uniform Resource Locator) după linkuri ♦ Capitolul , Aspecte de pagină, explică modul în care CSS poate fi utilizat pentru a crea machete Acest capitol include soluții atât pentru aranjamente cu o singură coloană, cât și pentru mai multe coloane ♦ Capitolul , Trucuri de programare, creație și depanare, descrie modalități de a ascunde foile de stil care nu pot fi redate de anumite browsere Web Sunt oferite exemple de ascundere a foilor de stil din Internet Explorer pentru Windows și alte versiuni ♦ Capitolul „Proiectarea cu CSS” este definitoriu Subliniind că tehnologia CSS este doar un instrument de design, ea descrie rolul douăzeci Introducere text mărit, valoarea contrastului și cum să creați un afișaj panoramic ♦ Capitolul , Interacțiunea cu JavaScript, vă arată cum să utilizați biblioteca JavaScript, jQuery, pentru a obține efecte vizuale complexe ♦ Anexa , Surse, listează link-uri și adrese de site-uri Web care oferă informații suplimentare despre CSS ♦ Anexa , „Proprietăți CSS și îmbunătățiri personalizate”, furnizează un tabel cu proprietăți CSS care ajută la determinarea aspectului elementelor HTML și, uneori, a modului în care sună pe o pagină Web ♦ Anexa , CSS Selectori, Pseudo-clase și Pseudo-Elemente, listează selectoarele, pseudo-clasele și pseudo-elementele incluse în specificația CSS ♦ Anexa , Selectori CSS și Pseudo-Clase, listează selectoarele și pseudo-clasele incluse în noua specificație CSS ♦ Anexa , Stilarea elementelor de formular, arată modul în care diverse browsere Web moderne manipulează și afișează elementele de formular Versiunea tipărită a cărții conține o introducere în această aplicație, precum și informații despre cum să obțineți versiunea completă Versiunea interactivă (http://oreilly com/cataIog/ /) a acestei aplicații include tabele de referință pentru a verifica rapid ce proprietăți CSS sunt acceptate, precum și o prezentare completă a elementelor de formular, inclusiv capturi de ecran ale tuturor testelor Convenții folosite în carte Următoarele convenții tipografice au fost folosite de-a lungul cărții ♦ Elementele de interfață, precum și adresele de internet sunt scrise cu caractere aldine ♦ comenzi, moduri, comutatoare, variabile, atribute, chei, funcții, tipuri, clase, spații de nume, metode, module, proprietăți, parametri, valori, obiecte, evenimente, handlere de evenimente, tag-uri în limbaj XML și HTML, macrocomenzi, conținutul fișierelor, ieșirea comenzilor (Notă O secțiune cu acest titlu conține un sfat, o sugestie sau un comentariu general Avertisment j O secțiune cu acest titlu conține avertismente Folosind codul exemplu Această carte a fost publicată pentru a vă ajuta să vă faceți treaba În general, puteți utiliza codul din această carte în paginile dvs Web și în proiectele dvs de design Nu este nevoie să ne contactați pentru permisiune, Introducere cu excepția cazului în care reproduceți cantități mari de cod De exemplu, scrierea unui program care utilizează mai multe bucăți de cod nu necesită permisiune Vânzarea și distribuirea de CD-ROM-uri care conțin exemple din cărțile O'Reilly necesită cu siguranță permisiunea Răspunsul la o întrebare prin trimiterea la această carte și citarea unui fragment de cod nu necesită permisiune Includerea unor cantități mari de exemplu de cod din această carte în documentația care însoțește produsul dvs necesită cu siguranță permisiunea Referințele bibliografice sunt binevenite, deși nu insistăm asupra lor Astfel de referințe includ de obicei titlul, numele autorului, editorul și ISBN (International Standard Book Number) De exemplu: „CSS Cookbook, Third Edition, by Christopher Schmitt Copyright O'Reilly Media, Inc , - - - - '” Dacă considerați că utilizarea exemplului de cod este în afara utilizării legale sau a permisiunii acordate anterior, ne puteți contacta la permissions@oreilly com Cum să contactați O'Reilly Vă rugăm să trimiteți comentarii și întrebări cu privire la această carte editorului: O'Reilly Media Inc , Gravenstein Highway North Sebastopol, CA - - (SUA și Canada) - - (internațional sau local) - - (fax) Avem o pagină Web dedicată acestei cărți care listează errate, exemple și alte informații suplimentare Această pagină poate fi accesată la: http://www oreilly com/catalog/ Această carte are și un alt site web: http://csscookbook com Pentru comentarii și întrebări referitoare la această carte, vă rugăm să trimiteți un e-mail la: bookquestions@oreilly com Pentru mai multe informații despre cărți, conferințe, centre de resurse și rețeaua O'Reilly, vizitați site-ul web: http://www oreilly com Sau echivalentul său rusesc, pe care îl țineți în mâini: Schmitt K CSS Rețete de programare - Ed a -a - Sankt Petersburg: BHV-Petersburg, - Aprox ed Introducere Cărți online Safari® Safari Books Online este o bibliotecă electronică la cerere, care facilitează găsirea a peste de ghiduri de ajutor originale și videoclipuri cu tehnologie avansată pentru răspunsuri rapide la întrebările dvs Abonându-vă, puteți citi orice pagină și viziona orice videoclip din biblioteca noastră interactivă Citiți cărți pe telefonul mobil sau pe alte dispozitive mobile Vizualizați titlurile cărților noi înainte ca acestea să se epuizeze și obțineți acces exclusiv la manuscrisele tipărite și contactați prin e-mail autorii lor Copiați și inserați cod eșantion, creați listele dvs de favorite, descărcați capitole individuale, marcați secțiuni importante, creați note, imprimați pagini și profitați de o serie de funcții care economisesc timp O'Reilly Media a inclus această carte în Safari Books Online Pentru acces complet la această carte și la alte cărți conexe de la O'Reilly și alți editori, conectați-vă gratuit la http://my safaribooksonline com Mulțumiri În primul rând, un mare mulțumire lui David Siegel și Lynda Weinman pentru influența și sprijinul lor de la apariția designului web Nu aș fi scris o singură carte despre domeniul de activitate pe care îl iubesc atât de mult fără sprijinul și ajutorul lui Molly Holzschlag Colegii dezvoltatori web care dezvoltă și promovează design web bazat pe tehnologia CSS merită cele mai mari laude și respect: Douglas Bowman, Tantek Qelik, Dan Cederholm, Mike Davidson, Ethan Ethan Marcotte, Eric A Meyer (Egis A Meyer), Mark Newhouse, Dave Shea, Nicole Sullivan, Stephanie Sullivan și Jeffrey Zeldman (Jeffrey Zeldman) Mulțumiri speciale editorilor Bruce Lawson, Shelley Powers, Edd Dum-bi și corectorului Audrey Doyle pentru timpul, experiența și răbdarea lor De asemenea, îi sunt recunoscător Tatianei Diaz, editorul meu al ediției anterioare a acestei cărți În această ediție, rolul Tatianei i-a revenit lui Simon St Laurent Dispoziția sa calmă și capacitatea de a gestiona procesul de pregătire a unei cărți pentru publicare au făcut să fie mai puțin intimidant fluierul lamelor rotative care anunță apropierea termenului limită Sunt profund îndatorat prietenilor mei care știu că sunt cu adevărat devotat tehnologiilor Web și nu mă vor jigni pentru că nu le-am numit pe toate Introducere Îi mulțumesc Jessicai pentru că m-a hrănit cu prăjitură de ciocolată cu glazură de ciocolată de casă și bucăți de ciocolată pentru sărbătoarea zilei mele de naștere și lansarea ediției anterioare a cărții Mi-a plăcut extrem de mult, iar dentistul meu a apreciat și această lucrare excelentă Nu mai aștept cu nerăbdare un alt tort, dar v-am inclus în secțiunea de mulțumiri Mulțumesc familiei mele pentru dragoste și apreciere Sprijinul tău a fost întotdeauna, în vremuri bune și rele, de neclintit ca o piatră Și, ca întotdeauna, aștept cu nerăbdare următoarea noastră întâlnire Îi mulțumesc lui Ari Stiles pentru că a fost amabil cu mine și și-a acordat timp să lucreze la această carte Te iubesc Din nou, dedic această carte tatălui meu Mulțumesc că ești cel mai bun tată din lume Christopher Schmitt toamna http://christipherschmitt com http://twitter com/teleject CAPITOLUL Utilizarea elementelor HTML de bază Introducere Utilizarea eficientă a foilor de stil în cascadă (CSS) necesită o utilizare pricepută a limbajului HTML Acest capitol oferă o privire de ansamblu asupra principiilor de bază ale utilizării corecte a HTML pentru a vă pune pe drumul cel bun Veți analiza tehnicile de bază, dar esențiale, pentru a crea o pagină HTML, veți valida marcarea acesteia pentru a vă asigura că nu există greșeli de scriere sau erori și veți profita de noua versiune HTML a limbajului pentru a încorpora informații video și audio (Notă Dacă cunoașteți bine materialul, puteți parcurge acest capitol Chiar și o privire scurtă asupra acestuia vă va ajuta să dezvoltați abilități utile care vă vor ușura munca în viitor Structurarea documentelor Pentru a vă proiecta paginile Web, mai întâi trebuie să completați un document Web cu conținut sau conținut, de obicei un simplu fișier text Acest conținut dintr-un fișier text ar trebui să fie marcat cu etichete, adică să folosească HyperText Markup Language sau HTML HTML formează structura documentelor folosind elemente Când aplicați etichete acestor elemente în conținutul dvs , cum ar fi p pentru paragrafe și h pentru titluri, pagina Web începe să preia structura documentului HTML inerentă Browserul Web va afișa apoi structura documentului folosind propria foaie de stil Acest proces se numește redarea standard a unei pagini Web Este puțin probabil ca acest afișaj standard să câștige niciun premiu al competiției de design Este doar un punct de plecare care vă permite să legați direct o prezentare vizuală sau un design la Cascading Style Sheets (CSS) și limbajul JavaScript și să oferiți aspectul unei pagini Web Markup semantic Acest capitol este un exemplu de utilizare a HTML semantic Markupul semantic este o notație „radicală” în care aplicăm elementul HTML corespunzător oricărui conținut Capitolul De exemplu, pentru a desemna un paragraf, se folosește o etichetă p simplă la începutul și la sfârșitul textului paragrafului Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Evitați mizeria etichetelor HTML semantic nu este utilizat pe scară largă pe Web Deoarece diferitele elemente HTML arată diferit atunci când sunt afișate într-un browser, designerii web creează amestecuri adesea ciudate de elemente HTML, denumite în mod obișnuit sub denumirea de tag hodgepodge, pentru a obține prezentarea vizuală dorită Pentru a crește controlul asupra aspectului, designerii pot adăuga etichete HTML de prezentare sau grafice care intră în conflict cu conținutul marcat semantic, cum ar fi: Lorem ipsum dolor sit amet, consectetuer adipiscing elit , sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Aceste etichete HTML suplimentare sunt acolo pentru a controla aspectul unui singur paragraf Dacă utilizați codare HTML tradițională, este posibil ca fiecare element de pe pagina HTML a site-ului dvs să fie codificat cu elemente suplimentare care specifică culorile, fonturile, alinierea și poziționarea specifice designerului Acest proces este extrem de obositor și predispus la erori Imaginați-vă că proiectați un site Web de de pagini și doriți să includeți elemente de design specifice, cum ar fi culorile, fonturile, dimensiunile și alinierea Acum imaginați-vă că mențineți un site Web cu de pagini Ce zici de un site Web cu de pagini? Documentele HTML ale site-urilor devin rapid supraîncărcate de cod suplimentar, făcând atât conținutul, cât și codul aproape de neadministrat HTML este structura documentului Deci, este foarte important să folosiți HTML pentru a obține corectitudinea maximă posibilă a structurii documentului Prin utilizarea codării lean semantice, dezvoltatorii web reduc timpul necesar pentru suport tehnic și oferă o structură sursă la care pot fi aplicate foile de stil Selectarea unui editor de text Problemă Doriți să alegeți un editor de text pentru marcarea conținutului folosind limbajul HTML Utilizarea elementelor HTML de bază Decizie Numeroase aplicații software au fost adaptate pentru codarea HTML Unele sunt distribuite gratuit, în timp ce altele necesită plată Editorii de text de bază instalați cu sistemul de operare includ următoarele: ♦ Notepad (Windows); ♦ TextEdit (Mac OS); ♦ gedit (Linux) Următoarele sunt câteva editoare de text disponibile gratuit, cu o gamă largă de funcții: ♦ Notepad++ (Windows; http://notepad-plus sourceforgenet/uk/site htm); ♦ TextWrangler (Mac OS; http://www barebones com/products/TextWrangler/); ♦ jEdit (Windows, Mac OS și Linux; http://www jedit org/) Pentru medii de dezvoltare integrate (IDE-uri) mai profesionale, comerciale, încercați una dintre următoarele: ♦ Adobe Dreamweaver (Windows și Mac OS; http://www adobe com/products/dreamweaver/); ♦ Coda de la Panic Software (Mac OS; http://www panic com/coda/) Discuţie Unele aplicații potrivite pentru editarea HTML vin cu sisteme de operare precum Mac OS și Windows Acestea includ editorii TextEdit și, respectiv, Notepad (Notepad) Avertisment j Nu utilizați procesoare de text pentru a lucra cu HTML În timp ce aceste programe sunt ideale pentru a crea documente imprimabile obișnuite, ele vor insera în textul dvs formatare nedorită de care nu aveți nevoie Înainte de a utiliza TextEdit, selectați opțiunea de formatare a textului simplu (text neformatat, care poate fi citit liber) folosind secvența de meniu File I Preferences (Fișier | Parametri) În caz contrar, editorul de text poate genera rânduri lungi din elemente HTML Dacă utilizați Notepad, selectați Format | WordWrap (Format I Word Wrap) Vă va permite să plasați linii lungi în fereastra aplicației, facilitând astfel editarea acestora (Notă În ambele editoare, TextEdit și Notepad, asigurați-vă că salvați fișierul HTML cu extensia html Nu introduceți extensia html la sfârșitul numelui fișierului Nume precum example txt html sau example html txt duc la multă confuzie Capitolul Deși acești editori de cod sunt disponibile gratuit și preinstalați în sistemul de operare, nu au o gamă largă de opțiuni, mulți designeri web se bazează pe ele atunci când lucrează cu limbajul HTML Mai fiabil și încă gratuit Un alt editor de text, de asemenea gratuit, este TextWrangler de la Bare Bones Software TextWrangler nu este la fel de bogat în funcții precum produsul emblematic BBEdit, dar s-ar putea să se potrivească nevoilor dvs TextWrangler și BBEdit sunt aplicații numai pentru Mac OS Pentru Windows, există opțiuni precum Notepad++ și TextPad (http://www textpad com/) Pentru sistemul de operare UNIX există editori vi/vit și Emacs O altă opțiune este jEdit, care este disponibil atât pentru Mac OS, cât și pentru Windows Soluții software IDE Produsele software cu mai multe caracteristici costă adesea mai mult, dar oferă un set complet de instrumente pentru a rezolva aproape orice problemă cu care te confrunți atunci când construiești un site Web Produsele populare din acest segment sunt Adobe Dreamweaver Rapіs și editorii Coda de la Software Vezi si Consultați http://www notepad org/logo htm pentru un banner grafic „Made with Notepad” pe care îl puteți plasa pe pagina dvs Web Codificarea unei pagini HTML simple Problemă Doriți să vă creați prima pagină HTML Decizie Începeți cu conținutul inițial ca acesta: Mu Basic Web Rade Epsum factorial pop depozit quid pro quo hic escorol Apoi creați un element HTML care include întregul document Mu Basic Web Rade Epsum factorial pop depozit quid pro quo hic escorol Apoi, introduceți elementele cap și corp în document Utilizarea elementelor HTML de bază Pagina mea web de bază Epsum factorial non deposit quid pro quo hic escorol În elementul head, includeți un element titie Carte de bucate CSS Pagina mea web de bază Sed quis custodiet ipsos custodes? În elementul body, introduceți elementele de titlu(e) și paragraf(p), iar pagina va fi redată așa cum se arată în Figura Carte de bucate CSS Pagina mea web de bază Sed quis custodiet ipsos custodes? Carte de bucate CSS Despre Christopher Scbmitt © '• Tccbnoîogy Books, T Q Pagina mea web de bază Scd quis custodiei ipsos custodes? Orez Redare standard a unei pagini Web HTML simple Discuţie Fiecare pagină Web trebuie să aibă un element html care să cuprindă întregul document Fiecare element html are două elemente necesare, cap și corp Elementul head conține informații despre document, adesea denumite metadate Elementul cap trebuie să includă un element titie Acest text se află de obicei în treizeci Capitolul partea de sus a ferestrei browserului și este utilizată la crearea marcajelor Când formați eticheta titie, este important să fiți concis și să evitați descrierile lungi Dacă nu este inclus text în elementul titie, browserele vor folosi fie numele fișierului, fie primele cuvinte ale documentului (Notă Elementul titie poate conține doar text Nu este permisă includerea altor elemente HTML în el Conținutul documentului Web este plasat în elementul body Dacă trebuie să editați sau să reproiectați o pagină Web, vă veți petrece cea mai mare parte a timpului în acest element În exemplul de mai sus, antetul este dat în elementul s, iar elementul standard p este folosit pentru a desemna un paragraf Vezi si Sec q alegerea unui editor de text Despre DOCTYPE și influența sa la aspectul paginii în browser web Problemă Doriți să creați o pagină Web validă, compatibilă cu standardele Decizie Există trei tipuri de documente în specificația limbajului HTML : strict (strict), Transitionai (tranzițional), Frameset (cu cadre) În specificațiile HTML și XHTML , există un singur tip de document, dar în specificația XHTML , ca și în HTML , există trei tipuri Există o singură definiție a tipului de document (Document Type Declaration, DTD) într-un document HTML Utilizați una dintre următoarele declarații doctype, după cum este adecvat pentru proiectul dvs : ♦ HTML DTD strict: ♦ HTML Transitionai DTD: ♦ HTML Frameset DTD: Utilizarea elementelor HTML de bază ♦HTML DTD: ♦ XHTML D Strict DTD: ♦ DTD de tranziție XHTML : ♦ XHTML Frameset DTD: ♦ DTD XHTML : Următoarea este o pagină de bază cu specificația HTML DTD și elementele head, body și html necesare Carte de bucate CSS Pagina mea web de bază Epsum factorial non deposit quid pro quo hic escorol Discuţie Declarația doctype, prescurtare pentru Document Type Declaration, definește blocurile care alcătuiesc un document HTML și XHTML și le spune browserelor Web și validatorilor (validator) ce versiune de HTML sau XHTML este utilizată în documentul dvs Declarația doctype trebuie să fie prezentă la începutul fiecărui document de pagină Web, înainte de elementul html, pentru a vă asigura că marcajul și CSS-ul dvs sunt conforme cu standardele și că browserele Web redă paginile pe baza DTD-ului corespunzător Modul de compatibilitate inversă Specificația XHTML necesită un tip de document adecvat la începutul documentului, altfel paginile pot eșua validarea, iar browserele web vor intra în ceea ce este cunoscut sub numele de modul de compatibilitate vechi al browserului sau modul ciudate Capitolul NII nowidth "ttribvta in e - HTML mic Bună lume Conformitatea acestor trei elemente HTML cu specificația HTML este verificată prin verificarea acestei pagini cu validatorul aflat la http://validator w org/check?uri=http% A% F% Fjsbin com% Fowata&ss=l Vezi si Specificația HTML pentru DTD la http://dev w org/html /spec/Overview html#the-doctype; specificația HTML pentru DTD la http://www w Org/TR/html /intro/sgmltut html#h- ; validatori de consorțiu Capitolul W C la http://www w Org/QA/Tools/#validators; articol despre doctype din „A List Apart” la http://www alistapart com/stories/doctype/; articol despre modul de compatibilitate inversă la http://www quirksmode org/index html /css/quirksmode html ; Informații despre modul de compatibilitate inversă a browserului Web Mozilla care explică diferențele dintre modurile de randare și caracteristicile de procesare în modul de compatibilitate inversă la http://developer mozilla org/en/docs/Mozilla% s Quirks Mode; pagina browserului Opera pe doctype, la http: //www opera com/docs/specs/doctype/ Markup antet Problemă Doriți să faceți distincția între titlurile din același document în ordinea importanței Decizie Aplicați unul dintre cele șase elemente de antet disponibile, de la o la h , așa cum se arată în Figura - Carte de bucate CSS Pagina mea web de bază Epsum factorial non deposit quid pro quo hic escorol Titul secundar Feles mala! cur cista non uteris? stramentum novum in ea posui Titul teritorial Por scientie, musica, sport etc , li tot Europa usa li sam vocabularium Tit cuaternar Lex clavatoris designați rescindenda est Titl Quinary Ire fortiter quo nemo ante iit Titul Senatului Interdum feror cupidine partium magnarum europe vincendarum Utilizarea elementelor HTML de bază Despre CSS Cookbook Si fallatis officium, chestor infitias eat se quicquam scire de factis vestris Orez Afișare standard de citare Utilizați elementul q pentru a cita fraze individuale Virgil a spus Sic itur ad astra Discuţie biockquote este un element la nivel de bloc Aceasta înseamnă că textul plasat în elementul biockquote este separat de restul textului prin inserarea unei întreruperi de linie înainte și după el Utilizarea elementelor HTML de bază Elementul q este un element inline care nu adaugă întreruperi de linie Elementele inline sunt potrivite pentru citarea unor fragmente scurte de text dintr-un paragraf (Notă) De obicei, elementul q este redat cu ghilimele în jurul textului pe care îl conține Dar Internet Explorer pe Windows nu afișează aceste ghilimele Atributul cite este opțional pentru elementele biockquote și q Valoarea acestuia este URI-ul (Universal Resource Identifier) al sursei din care a fost preluat citatul Vezi si Capitolul cu o descriere a tehnicilor de tipărire utilizate în mod obișnuit Inserarea unei imagini Problemă Doriți să puneți o imagine pe o pagină Web, așa cum se arată în Figura Orez Imagine inclusă în document in spate Capitolul Decizie Utilizați elementul img pentru a specifica locația fișierului care conține imaginea Introduceți un atribut alt în elementul img pentru a oferi text alternativ în cazul în care imaginile sunt dezactivate sau utilizatorii folosesc funcții de accesibilitate, cum ar fi cititoarele de ecran Discuţie Elementul img nu se referă la conținutul din documentul în sine Acesta definește doar locația sa în document și specifică locația sa în raport cu documentul HTML Sugestii suplimentare Chiar dacă o imagine valorează cât o mie de cuvinte, valoarea atributului alt ar trebui să fie o descriere relativ scurtă După cum se arată în fig Așa cum se arată în Figura , unele browsere Web afișează text după cursor, numit sfat instrument, stocat în atributul titlu al imaginii Formate de fișiere Cele mai comune formate de imagine acceptate de browserele web sunt GIF și JPEG Fiecare alegere are avantaje și dezavantaje pentru stocarea diferitelor tipuri de imagini În ceea ce privește metoda de compresie, o metodă de reducere a dimensiunii fișierului unei imagini, formatul GIF este mai bun pentru zonele cu zone de culoare uniformă și puține tranziții de culoare, în timp ce formatul JPEG este mai bun pentru fotografii și modificări subtile de culoare Toate browserele web acceptă formatul PNG, dar canalul alfa de transparență este acceptat în prezent numai în Internet Explorer pentru Windows Canalul alfa permite opacitatea sau diferite grade de transparență într-o imagine, spre deosebire de formatul GIF, care poate face transparentă doar o singură culoare Când o imagine PNG cu transparență alfa este redată în versiuni mai vechi de IE, haotile transparente se transformă de obicei în blocuri pline cu alb solid Sensibilitatea caracterelor din numele fișierului Când specificați un fișier imagine folosind HTML, asigurați-vă că nu există spații în numele fișierului și că literele mari și mici sunt potrivite Nu Utilizarea elementelor HTML de bază Deși sistemul de operare dvs poate să nu țină seama de majuscule și minuscule, serverul Web care găzduiește fișierele dvs Web poate să nu distingă majuscule și minuscule, împiedicând redarea imaginilor într-un browser Web Vezi si Capitolul pentru o descriere a aspectului paginilor Web care conțin imagini Încorporarea fișierelor audio folosind HTML Problemă Doriți să adăugați informații audio la o pagină Web creată folosind standardul HTML Decizie Pentru a specifica un fișier audio, utilizați elementul audio, așa cum se arată în Figura Carte de bucate CSS Exemplu audio Descărcați conținut audio Orez Încorporarea informațiilor audio pe o pagină web Capitolul Discuţie Există cinci atribute asociate cu elementul audio: src, autobuffer, redare automată, intrare și comenzi Dacă nu aveți atributul controls, playerul de sunet nu este afișat Compatibilitate sunet La momentul scrierii acestui articol, nu există un singur tip de fișier audio care să fie redat în toate browserele Web care acceptă elementul de specificație audio HTML , așa cum se arată în Tabelul Tabelul Suport pentru formatele de fișiere audio HTML Firefox Safari Chrome beta Opera Ogg Vorbis Da Da MP Da Da WAV Da Da Da Pentru a forma o soluție generică, utilizați elementul audio împreună cu elementul sursă, care se referă atât la fișierele OGG, cât și la fișierele MP Apoi, inserați codul pentru Flash Pavier cu elementele încorporate și obiect Nota j Dacă încorporați fișiere de sunet, nu este recomandat să setați atributul de redare automată pentru acestea, deoarece acest lucru poate interfera cu utilizatorii de Web care folosesc cititoare de ecran Vezi si Sec despre încorporarea unui videoclip într-o pagină web Încorporarea video folosind HTML Problemă Doriți să includeți conținut video în paginile dvs Web Decizie Utilizați elementul video din specificația HTML , așa cum se arată în Figura Utilizarea elementelor HTML de bază Carte de bucate CSS Exemplu video cvideo src="html video ogg” width=" ” height=" ” controlează poster="html video jpg”> Descărcați filmul Orez Date video incluse în pagina Web Discuţie Lățimea și înălțimea elementului video sunt opționale Dacă nu specificați un element video cu atributele corespunzătoare, videoclipul va fi redat la dimensiunile implicite setate în fișierul video Un fișier video poate avea propriul afiș sau afiș - o imagine statică care reprezintă datele video ca întreg și seamănă cu o pictogramă în aparență Capitolul Poate fi suprascris cu atributul poster Imaginea afișului poate fi în orice format acceptat de browserele web (GIF, JPEG sau PNG) (Notă) Deși atributul controls este opțional, din motive de comoditate, vă sugerez să îl utilizați pentru a nu deranja vizitatorii site-ului dvs Între etichetele video, puteți pune text alternativ, inclusiv un link pentru a descărca fișierul video pentru browserele web care nu recunosc elementul video Această abordare va permite vizitatorilor site-ului Web să vadă conținut folosind programe terțe Vezi si Site-ul web http://www videolan org/, care conține informații despre instrumentele de export din aplicația software VLC, care poate fi folosită pentru a converti fișiere video standard în formatul OGG (suportat de browserele Firefox și Opera) Aplicarea eficientă a puternic și em Doriți să evidențiați anumite cuvinte sau expresii într-un paragraf, așa cum se arată în fig OOO SI Carte de bucate Carte de bucate CSS - IP eload Stop Note Pnnt IPPassword Ma quandc lingues coalescc, li grammatica dcl resultant lingue cs piu simpiic c regulari quam ti del coalcsccnt lingues Li nov lingua franca va esser piu simpiic c regulari quam li existent Europan lingues It va esser tam simpiic quam Occidental: de fapt, it va esser Occidental A un Angleso it va scmblar un simplificat Angles, quam un skcptic Cambndge amico dit mc quc Occidental cs k Orez Afișare standard a textului selectat Decizie Pentru a indica accent vizual într-un document, utilizați elementele puternice și em Ma quande lingues coalesce, li grammatica del resultant lingue es piu simpiic e regulari quam ti del coalescent lingues Li nov lingua franca va esser piu simpiic e regulari quam li existent Europan lingues It va esser tam simpiic quam Occidental: de fapt, it va esser Occidental A un Angleso it va semblar un simplificat Angles, cam un sceptic Cambridge amico dit te que Occidental es Discuţie În afișarea standard, scopul elementului puternic este de a reda textul cu caractere aldine, în timp ce elementul em redă textul cu caractere cursive Utilizarea elementelor HTML de bază Elementul esh ar trebui folosit pentru a atrage atenția sau pentru a crea o afișare contrastantă a unuia sau mai multor cuvinte în comparație cu restul propoziției De exemplu: ♦ Darth Vader se traduce vag prin Dark Father în olandeză ♦ În Statele Unite ale Americii nu sunt , ci de state ♦ Dacă vă alăturați lui, el vă va finaliza pregătirea Elementul puternic este o modalitate alternativă de a sublinia cuvinte sau fraze Deși folosirea em și strong ajută la spargerea monotoniei textului, folosiți-le cu moderație și consecvență pentru a evita utilizarea excesivă a acestora Vezi si Capitolul pentru alte tehnici de tipărire utilizate în mod obișnuit Crearea listelor Doriți să generați o listă de articole pe o pagină Web, așa cum se arată în Figura • Firstltcm • Element secundar • Terţiariltem • Element cuaternar Orez Afișare standard a listei cu marcatori Decizie Pune o listă de expresii într-un element ui Primul articol Element secundar Articol terțiar Element cuaternar Apoi utilizați elementul li pentru a eticheta fiecare articol din listă Primul articol Element secundar Capitolul Articol terțiar Articol cuaternar Discuţie Există trei tipuri de liste în HTML: cu marcatori, numerotate și cu definiții Este foarte ușor să creezi liste cu marcatori și numerotate Pentru a marca elementele din listă cu marcatori, utilizați elementele ui și și, ceea ce va avea ca rezultat un cerc care va apărea în partea stângă a fiecărui element din listă (Notă) O listă cu marcatori este de obicei folosită pentru a forma baza unui meniu de navigare Listele numerotate care folosesc oi în loc de ui au un număr secvenţial ataşat la începutul fiecărui articol După cum se arată în fig , listele de definiții care sunt folosite pentru a defini termenii funcționează oarecum diferit față de listele marcate și numerotate Fiecare element din listă este împărțit în două părți: un termen (dt) și o definiție (dd) Primul termen Seriatim Termen secundar Sequentia Termen terțiar Sequens mirabitur aetas Forwatd ROO CSS Carte de bucate Carte de bucate CSS fișier ia Q I T+ Primul Tcrm Scriatim Sccondary Tcrm Scqucntia Tertiar Tcrm Sequns mirabitur actas Orez Afișarea listei cu definiție standard Vezi si Capitolul despre liste și Capitolul despre link-uri și navigare Utilizarea elementelor HTML de bază Crearea unui link către o pagină web Problemă Doriți să faceți un link către o altă pagină web Decizie Aplicați elementul de ancorare site-ul web al acestei cărți conține linkuri pentru a descărca mai multe materiale Pentru a face legătura către o altă pagină de pe același site Web, consultați numele fișierului acesteia Consultați pagina Despre pentru mai multe informații Discuţie Ca și în cazul elementului img (a se vedea Secțiunea ), unele browsere Web sunt afișate, așa cum se arată în Figura , un sfat explicativ dacă elementul ancora are un atribut titie și valoarea acestuia site-ul web al acestei cărți conține linkuri pentru a descărca mai multe materiale AOO CSS Cookbook ' Pagina de servicii Dacă doriți să conectați de la o pagină de index la o altă pagină de pe același site Web, utilizați un link relativ O legătură relativă este puțin mai compactă decât o legătură absolută și, ca în acest exemplu, se poate referi doar la un nume de fișier din atributul href Pagina de servicii Legăturile relative nu conțin nici protocolul complet http://, nici numele de domeniu ▼ hnpdocs , despre noi html conuctus html index html servers html Orez Exemplu de structură de director Când un browser Web navighează la o legătură relativă, folosește numele de domeniu al paginii afișate curent pentru a forma legătura exactă la care ar trebui să navigheze Navigare în foldere La fel cum computerul dvs personal este plin cu numeroase foldere care conțin multe fișiere pentru un proiect, site-urile Web sunt alcătuite din colecții de foldere și fișiere Pentru a conecta de la un document la un alt document în cadrul aceluiași site Web, utilizați legături relative Să presupunem că aveți pagina principală a specificațiilor tehnice în folderul specificații, care la rândul său se află în folderul widget Structura fișierelor de pe server ar putea arăta astfel: • produse/ -widget/ -specificații/ - specs html Pentru a conecta la pagina widget din pagina de specificații, utilizați notația / pentru a spune browserului web să meargă la directorul părinte sau în sus Pagină widget Dacă doriți să urcați două niveluri în structura folderului și să faceți un link către pagina principală a produselor din pagina cu specificații, trebuie să faceți link astfel: Pagina de produs Utilizarea elementelor HTML de bază Aplicarea de link-uri relativ la rădăcina site-ului Utilizarea de link-uri relative pentru a naviga între foldere de pe un site Web mare poate fi uneori un proces complex și chiar confuz În acest caz, puteți utiliza un alt tip de legături - un link relativ la rădăcina site-ului Iată cum să utilizați un link relativ la rădăcina site-ului pentru a înregistra un link din pagina cu specificații către pagina principală a produselor din exemplul anterior: Pagina de produs Bara oblică indică protocolul și numele de domeniu al URI-ului, un fel de prescurtare pentru linkuri Legături către anumite elemente dintr-o pagină Web Vă puteți referi la anumite elemente dintr-un document HTML prin crearea de ancore sau ancore O ancoră poate fi creată prin atribuirea unui atribut id unui element HTML h id="hireme">Angajați-mă Apoi faceți referire la această ancoră prefixând numele id-ului cu un caracter hash (#) Angajați-mă Când se face clic pe link, browserul Web navighează la partea din document care are numele de ID corespunzător (Notă Dacă întregul document se încadrează în câmpul de ieșire sau în fereastra browserului, nu va exista nicio modificare vizibilă care să indice că browserul web a navigat la linkul de ancorare Designerii folosesc ancore pentru a crea un cuprins în partea de sus a paginii, permițându-vă să navigați rapid la diferite părți ale documentului Această abordare este utilă în special pe paginile Web cu mult conținut, deoarece scutește utilizatorii de derularea excesivă Vezi si Capitolul despre linkuri și navigare Dispunerea tabelului Problemă Doriți să creați un tabel HTML simplu, așa cum se arată în Figura Decizie Utilizați elemente speciale legate de marcarea datelor tabelare ctable border="l" cellspacing="l" cellpadding="l"> Capitolul Cunoaște-ți rata de adopție IE % ■ vmk Peload Sto? Noshe IMnt iP-mwotd Carte de bucate CSS d GJ fâ Technotogv 'ookv lec Cunoașteți rata de adopție І : G%|І Orez Redare standard a unui tabel HTML simplu Discuţie Mai întâi, introduceți o etichetă la începutul și la sfârșitul datelor din tabel Eticheta definește tabelul ca întreg Elementul opțional este destinat pentru o scurtă descriere a datelor tabelare și este inserat imediat după elementul de deschidere Apoi, dacă tabelul are un antet, adăugați elementul thead la unul sau mai multe rânduri de antet de tabel Pentru a marca corpul unui tabel, pentru a-l separa de antetul tabelului, utilizați eticheta tbody Apoi inserați etichete tr table row pentru a desemna fiecare rând de tabel Acest element se întinde pe grupuri de celule individuale de tabel Mai întâi definiți un rând, apoi adăugați celulele pe care le conține Utilizarea elementelor HTML de bază (Notă) Nu există nicio etichetă specială pentru o coloană de tabel Coloanele se formează numai datorită construcției rândurilor succesive ale tabelului După aceea, utilizați eticheta pentru a desemna fiecare celulă pe care doriți să o marcați ca celulă de antet de tabel, care include ani și procente în exemplul nostru Conținutul specific al celulei trebuie inserat în etichetă În mod implicit, browserele web afișează textul în celulele antetului cu caractere aldine Pentru a marca celulele individuale ale tabelului, utilizați eticheta td La fel ca eticheta-a, eticheta td inserează conținutul specific al celulei (Notă Pentru a evita aranjarea mai multor celule de tabel, încercați manual generatorul de tabel HTML simplu la http://www askthecssguy com/kotatsu/index html Vezi si Capitolul despre tabele Crearea unui vCard (hCard) folosind HTML Problemă Doriți să puneți informații de contact pe o pagină Web, cum ar fi pe o carte de vizită (Figura - ) Iosia Banlt casa Alba Pcnnsylvania Avcnue NW Washington, DC, Orez Afișare standard a informațiilor de contact în format hCard Decizie Utilizați atributele ciass cu atributele speciale enumerate în specificația de microformat hCard (http://microformats org/wiki/hcard) cincizeci Capitolul Josiah Bartlet Casa Albă Pennsylvania Avenue NW Washington , DC , Discuţie Microformatul hCard oferă o modalitate de a afișa informații de contact, inclusiv persoane, organizații și locații, folosind atributele ciass ale specificației XHTML Este unul dintre multele formate detaliate în Proiectul Microformats (http://microformats org/), care își propune să ofere standarde pentru codificarea informațiilor care pot fi citite de mașină în HTML semantic pe paginile Web La fel ca șabloanele de design, hCard standardizează modul în care sunt prezentate informațiile, permițând software-ului terță parte să colecteze informații și să le folosească pentru tot felul de scopuri bune Pentru a economisi timp și a evita potențialele greșeli de scriere, utilizați hCard Creator (http://microformats org/code/hcard/creator) pentru a genera markup HTML pentru informațiile de contact extensia hcard Serviciul Web H VX (http://h vx com/vcf/), utilizabil ca bookmarklet pe un site web, scanează marcajul unei pagini Web căutând date hCard în adresa Web Dacă găsește date hCard, îl solicită vizitatorului să descarce datele ca o carte de vizită electronică a standardului vCard Vizitatorul site-ului poate importa apoi datele vCard în agenda de adrese a aplicației preferate, cum ar fi Outlook (Windows) sau Address Book (Mac OS X) Runner (https://addons mozilla org/en-US/firefox/addon/ ) este o extensie Firefox care detectează text microformatat pe o pagină Web și apoi oferă opțiuni pentru diferite opțiuni de prezentare, în funcție de tipul de microformat utilizat Există un plugin similar pentru Safari http://zappatic net/safarimicroformats/ Vezi si validator hCard la http://en hcard geekhood net/; sec despre utilizarea HTML pentru a marca un eveniment Apropo, versiunea rusă a numelui „zakladurka” nu este mai rea (http://ru wikipedia org/wiki/%D % % Dl% %D %BA%D %BC%D %B %Dl% % D %BA%D %BB%D %B %Dl % ) — Aprox pe Utilizarea elementelor HTML de bază Markup eveniment (hCalendar) Problemă Doriți să utilizați HTML pentru a marca informațiile despre eveniment Decizie Utilizați atributele ciass și titie cu atributele speciale enumerate în specificația de microformat hCalendar (http://microformats org/wiki/hcalendar) iulie, - : : Summitul CSS la Conferința online Discuţie Microformatul hCalendar, bazat pe formatul de fișier iCalendar utilizat pentru a face schimb de date despre evenimente, folosește limbajul HTML standardizat pentru a codifica informații despre ora și locul unui eveniment într-un document Web Fiecare eveniment individual este definit folosind clasa vevent Specifică conținutul ca element de intrare al formatului hCalendar Ora de începere a evenimentului, dtstart și sumarul sunt proprietăți necesare pentru fiecare eveniment hCalendar, în timp ce dtend și locația sunt proprietăți opționale O foaie de cheat cu o listă de proprietăți opționale de microformat hCalendar este disponibilă la http://microformats org/wiki/hcalendar-cheatsheet Vezi si Generatoare de format hCalendar (http://microformats org/wiki/hcalendar/creator) și Programul conferinței (http://dmitry baranovskiy com/work/csc/) pentru a simplifica reprezentarea propriului eveniment hCalendar; sec privind includerea informațiilor de contact pe pagina Web Verificarea validității marcajului HTML Problemă Doriți să vă asigurați că marcajul HTML al paginii dvs Web este corect din punct de vedere sintactic Capitolul Utilizați validatorul W C (http://validator w org/) pentru a introduce URI-ul unui document Web și testați-l pentru corectitudinea HTML, așa cum se arată în Figura De asemenea, puteți testa codul încărcând un fișier CSS sau introducând reguli CSS L OO (VaMdJ M*rkup VaiMfatfon of hrtp / /www csicookbook corn/ - W C Markup Validator IMK fwwwd ftetaad Serviciul de validare a markupurilor CMC* Nr Nuartup (HTML, XHTML, } * WaO donvmanU Salt la: FelicitariJabons Icons Sursă Lssting Acest document a fost verificat cu succes ca XHTML Strict! RMUtit Adrese: http://**", carte de bucate css porumb/ Modificat: (uncte man • - opt „H element rădăcină: ntml Rădăcină Narnepece: VALIDATOR Idatorii W C se bazează pe sprijinul comunității pentru hoshng și dezvoltare Puneți și ajutați-vă pe ufi să construiască betler toots pentru o web mai bună Opțiuni MShow Source Zăpadă Oilgyu H Usl Mes&age SequentiaJIy QGroup Enor Mesaje 'jy Typc Orez Validarea paginii web Discuţie W C a postat un verificator de cod HTML robust pe site-ul său web Dar concluzia ei este uneori greu de înțeles Asigurați-vă că mai multe opțiuni | Ieșire detaliată (Opțiuni avansate | Ieșire detaliată) Această opțiune de răspuns a programului oferă mai multe informații de fundal despre erorile din codul dvs , oferindu-vă mai multe opțiuni pentru depanare Utilizarea elementelor HTML de bază Crearea unui Bookmarklet pentru un validator HTML Utilizați bookmarklet-ul pentru a valida orice pagină pe care o vizitați în Webspace cu validatorul HTML Un bookmarklet este un mic program JavaScript ascuns în elementul din fila Adresă Creați un nou marcaj (linie în lista de Favorite), numiți-l „Validator HTML” și apoi înlocuiți orice conținut din câmpul de adresă cu următorul rând: j avascript:void(document location='http://validator w org/check? charset=% detect+automatically% &doctype=Inline&ss=l&group= & verbose=l&uri='+escape(document locat ion)) Când vizitați un alt site Web, făcând clic pe bookmarklet va trece prin validatorul HTML pagina încărcată în prezent în browserul Web Vezi si Sec privind validarea regulilor CSS CAPITOLUL Bazele CSS Introducere Foile de stil în cascadă (CSS) oferă o modalitate ușoară de a afișa conținut sau conținut informațional pe paginile dvs Web Tehnologia CSS poate părea complicată la prima vedere, dar în acest capitol veți vedea cât de ușor este să utilizați CSS Următorul este un exercițiu care folosește salutul standard „Bună, lume!” Mai întâi, deschideți un editor de text sau programul de editare web preferat și introduceți următoarele rânduri: Carte de bucate CSS Bună lume! Salvați fișierul și vizualizați-l în browserul dvs web După cum se vede în fig , această linie este afișată fără nicio caracteristică Orez Afișare standard a textului HTML fără aplicarea CSS Pentru a schimba stilul textului HTML folosind familia de fonturi sans șerif (sans-serif), adăugați următoarea linie de CSS (Figura ): Bună ziua, lume! Sau, păstrând fontul implicit, modificați dimensiunea acestuia prin creșterea parametrului font-size la % cu următoarea linie de cod (Figura ): Bună ziua, lume! Bazele CSS Carte de bucate CSS •GMD, flack Foțwțrd O fțC, Techooio^y Books T Q ac Christophcr Schniitt Q Carte de bucate CSS Salut Lume! Orez Fontul a fost schimbat în sans șerif folosind tehnologia CSS A O O CSS Carte de bucate Stop Note Prim Pa$ rece f ^^tj'^Technology Sookfr, T O fc Chdstopher Schraitto” Salut Lume! Orez Creșterea dimensiunii textului În acest capitol, veți afla despre selectoare și proprietăți, organizarea foilor de stil și poziționarea Exemplele simple oferite aici vă vor pregăti să înțelegeți exemplele mai complexe din capitolele ulterioare Aplicarea regulilor CSS la pagina web Problemă Doriți să aplicați reguli CSS pentru a vă proiecta pagina Web Decizie Începeți cu o pagină goală în Notepad, editorul dvs de text preferat sau alt program de proiectare a paginilor Web, cum ar fi Adobe Dreamweaver sau Microsoft Expression (Notă) Dacă utilizați un editor de text simplu, asigurați-vă că selectați opțiunea de a salva fișierul ca text simplu (Text simplu) și nu RTF Lipiți următorul cod HTML între etichetele body și salvați fișierul ca cookbook html: Carte de bucate CSS Gpava Titlul paginii Acesta este un exemplu de paragraf cu a link Efectuați următoarele modificări de cod (marcate cu aldine) pentru a înlocui stilul linkurilor, listelor cu marcatori și titlurilor Rezultatul este prezentat în fig html> Carte de bucate CSS Comentariile sunt inserate pentru a ascunde descrierea CSS și a împiedica afișarea acesteia în aspectul paginii Web sau redată de browser într-un mod nedorit Foile de stil externe sunt stocate într-un fișier separat, care este combinat cu fișierul HTML folosind un mecanism de legătură Următorul cod este salvat în propriul fișier: /* Document CSS ★/ hl { dimensiunea fontului: % } b { dimensiunea fontului: % ) R ( familie de fonturi: Verdana, Arial, Helvetica, sans-serif; Un avertisment Rețineți că nu există niciun element de stil în foaia de stil externă Pentru a lega o foaie de stil externă care conține stilurile descrise mai devreme, adăugați următoarea linie între etichetele head din codul paginii Web: Stilurile inline acționează similar cu elementul font, prin aceea că sunt inserate în marcajul afectat Titlul paginii Bună ziua, lume! Bazele CSS Discuţie Există trei tipuri de foi de stil ♦ Extern Toate paginile Web sunt legate la o foaie de stil externă care nu conține decât stiluri CSS Dacă doriți să schimbați culoarea fontului pe toate paginile asociate cu această foaie de stil, schimbați doar foaia de stil externă Conectați pagina la foaia de stil folosind eticheta de link ♦ Intern O pagină Web individuală are propria sa foaie de stil, astfel încât stilurile se aplică numai acelei pagini, nu tuturor paginilor Web Definiți stilurile interioare în etichetele styie ♦ Încorporat Stilurile inline acționează similar cu eticheta fontului, aplicând stilul unei anumite etichete pe o pagină Web Dezvoltatorii folosesc rar stiluri inline Foile de stil externe și interne ale site-ului web necesită mai puțin timp de întreținere decât stilurile inline Nu trebuie să aplicați o etichetă de font fiecărui element care necesită stil, păstrează fișierul compact și logic De exemplu, ați moștenit o pagină Web care are tot textul în albastru și folosește elementul font pentru a-și controla dimensiunea Primiți solicitări de schimbare a culorii textului de la albastru la negru, așa că căutați toate aparițiile elementului pentru a schimba culoarea de la bue la bakk, cum ar fi următoarea linie: Textul ajunge aici Este nevoie de doi pași pentru a schimba toate elementele de la p uu la yask în foaia de stil externă Deschideți fișierul CSS și schimbați culoarea R { culoare: hack; } În foaia de stil internă, puteți schimba culoarea textului de la albastru la negru, căutând eticheta styie din partea de sus a paginii și înlocuind ye cu yeak Când să aplicați stiluri inline Când utilizați stiluri inline, înlocuirea culorii va dura atât timp cât este nevoie pentru a repara fișierul original cu eticheta fontului: Testul are loc aici De ce ar putea fi necesar să se aplice stiluri inline, având în vedere timpul necesar pentru a face modificări? Acest lucru se întâmplă rar, dar s-ar putea să se întâmple Gpava conținut care apare o singură dată pe întregul site Web și necesită un stil special În loc să aglomerați o foaie de stil externă cu stilul pentru un singur fragment, utilizați stiluri inline Când să folosiți foile de stil interne Când vine vorba de foi de stil interne și externe, majoritatea site-urilor folosesc foi de stil externe Cu toate acestea, atunci când începeți să scrieți cod CSS pentru aspectul paginii Web, cel mai bine este să începeți de la foaia de stil internă Când ajungeți în punctul în care proiectul se termină sau devine puțin greu de manevrat, mutați foaia de stil într-un fișier separat Apoi faceți modificările de care aveți nevoie pentru a naviga la foaia de stil externă Este posibil să aveți, de asemenea, o pagină specială care nu este asociată cu un site Web sau care utilizează stiluri speciale În acest caz, este mai ușor să aplicați o foaie de stil internă decât să aglomerați o foaie de stil externă Vezi si Secțiunea Foi de stil a specificației limbajului HTML la http://www w org/TR/html /present/styles html; „CSS How to Insert a Style Sheet” de pe site-ul web W Schools http://www w schools com/css/css howto asp Despre sursele CSS Problemă Vrei să știi toate opțiunile pentru a lega o regulă CSS la un document Decizie Puteți aplica stiluri într-un document în următoarele moduri: ♦ folosind foaia de stil internă a browserului Web sau agentul utilizator; ♦ utilizarea foii de stil a utilizatorului (dacă utilizatorul a creat una); ♦ folosind foaia de stil (a autorului), care poate fi: • foaie de stil încorporată; • o foaie de stil încorporată sau internă; • foaie de stil importată; • o foaie de stil legată sau externă Discuţie Cu cât sursa de origine a regulilor CSS din lista de mai sus este mai mare, cu atât domeniul de aplicare al acestor reguli este mai mare în comparație cu altele generate de altele Bazele CSS sursele noastre Cunoașterea acestei liste este utilă atunci când depanați potențiale probleme în proiectele dvs Web Vezi si Sec cu informații despre ordinea de sortare a regulilor în CSS; Capitolul despre trucuri de programare, hack-uri și depanare Ordinea de sortare a regulilor în CSS Problemă Vrei să știi în ce ordine browserul web aplică regulile CSS Decizie Regula de bază este: „Cea mai apropiată regulă CSS de conținut câștigă” orice altă regulă CSS Discuţie Cu mai multe moduri de a asocia CSS cu un document Web (vezi Secțiunea ), browserul trebuie să fie capabil să rezolve potențiale conflicte atunci când aceleași reguli sau reguli similare apar din surse diferite Pentru a rezolva conflictele din regulile dvs CSS, urmați aceste instrucțiuni: ♦ Stilurile dvs personalizate au prioritate față de stilurile browserului Web ♦ stilurile autorului (dvs ) au o prioritate mai mare decât stilurile utilizatorului; ♦ stilurile interne au prioritate față de cele externe sau importate; ♦ Stilurile încorporate au prioritate față de stilurile interne, externe sau importate De exemplu, avem un set de paragrafe care sunt setate la sans-serif, așa cum se arată în Figura R { font-family: "Gill Sans", Trebuchet, Calibri, sans-serif; } Dar dacă introducem o altă regulă pentru stilarea paragrafelor în șerif și plasăm această nouă regulă înaintea celei anterioare, așa cum se arată în codul de mai jos, paragrafele vor rămâne neschimbate: Gpava R { font-family: Garamond, „Hoefler Text”, „Times New Roman”, Times, șerif; } P{ font-family: "Gill Sans", Trebuchet, Calibri, sans-serif; } ROO CSS Cookbook O Titlul paginii Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voiutpat Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit Io borti s nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voiutpat Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit Io borti s nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat voiutpat Ut wisi enim ad minim veniam, quis Orez Fontul de paragraf setat la familia sans-serif Doar când inserăm regula șerif după regula sans-serif, browserul web se schimbă așa cum se arată în Figura : R { font-family: "Gill Sans", Trebuchet, Calibri, sans-serif; } P{ font-family: Garamond, „Hoefler Text”, „Times New Roman”, Times, șerif; } Încă o dată, regula CSS cea mai apropiată de conținut câștigă Dar există o excepție de la această regulă – și aici intervine specificitatea (vezi Secțiunea ) Vezi si Sec pentru informații despre cum să legați o regulă CSS la un document; sec despre modul de determinare a specificității Bazele CSS R O O CSS Cartea de bucate C? - • C * ** ' P £ * Bat to Forwvard Rcload Stop Note Prim IPasswwd ■ ' ■ | [ J Carte de bucate CSS rcm ipsum dolor sit amet, consectctucr adipiscing elit, sed diam nonummy nibh cuismod tincidunt ut laorect dolore magna abquam erai volutpat Ut wisi enim ad minim vemam, quis nostrud exerci tation uUamcoq^er suscipit lobortis nisl ut aliquip ex ea commodo consequat Duis autcm vel cum iriure dolor in hendrerit in vulputate velk esse molcstic consequat, vel illum dolore cu feugiat nulla facilisis at vero cros et accumsan et iusto odio dignissim qui blandit praesent lup tatu m zzril delenit augue duis dolore te feugait nulla facilisi Ixrrem ipsum dolor sit amet, conscctetuer adipiscing elit, sed diam nonummy nibh cuismod tincidunt ut laorect dolore magna aliquam erat volutpat Ut wisi enim ad minim vemam, quis Orez Paragrafele sunt afișate cu fontul familiei șerif Aplicație importantă pentru a anula regulile individuale CSS Problemă Vrei să faci regulile individuale CSS mai importante decât altele Decizie Pentru a suprascrie o singură regulă CSS, utilizați ! important: R ( dimensiunea fontului: px !important; } Discuţie În unele browsere Web, utilizatorul poate avea o foaie de stil care este utilizată pentru a naviga pe Web și permite setarea dimensiunilor fonturilor și a altor proprietăți CSS în funcție de gusturile utilizatorului Dar, în calitate de dezvoltator de documente web, poate doriți să vă asigurați că proiectele dvs sunt afișate așa cum ați dorit Regula !important îți oferă (foarte) puțină asigurare că proiectele tale vor rămâne intacte Gpava Utilizatorul își controlează interfața Natura Web-ului este de așa natură încât desenele nu sunt niciodată redate la fel sau cu o acuratețe perfectă a pixelilor pe ecrane diferite Prin urmare, declarația! important nu poate garanta că stilurile dvs vor fi afișate în browserul web al utilizatorului așa cum ați dorit Când o pagină Web este afișată într-un browser, ultimul cuvânt este la latitudinea utilizatorului În ciuda faptului că tu, ca dezvoltator, scrii regulile! important, utilizatorul poate seta această declarație și în propria foaie de stil În specificația CSS , regulile ! important ca utilizatorul să poată scrie suprascrie orice! important, scris de designer Vezi si Reguli! important în specificația CSS la http://www w org/TR/CSS /cascade html#important-rules Definiţia specificity Problemă Doriți să înțelegeți cum se rezolvă conflictele în tabelele CSS atunci când sursa și ordinea de sortare a regulilor CSS sunt aceleași Decizie Fiecare regulă CSS are informații care permit browserului Web (și nouă) să cunoască ponderea sau specificitatea regulii Luați în considerare următoarele trei reguli CSS: #header p big { familie de fonturi: Impact, Haettenschweiler, „Arial Narrow Bold”, sans-serif; } P big { font-family: Futura, "Century Gothic", AppleGothic, sans-serif; } P{ font-family: "Gill Sans", Trebuchet, Calibri, sans-serif; } Cu cât o regulă CSS este mai specifică, cu atât este mai probabil să câștige într-un conflict cu o altă regulă După cum se arată în fig În Figura - , când este vizualizată într-un browser Web, prima regulă CSS (cu font Impact) câștigă Pentru a înțelege de ce prima regulă câștigă, să definim specificul unei reguli CSS Tabelul vă va ajuta în acest sens Bazele CSS Tabelul Ajutor pentru determinarea specificității Exemplu de selector Stil inline Număr de selectoare ID Număr de selectoare de clasă Număr de elemente R p mare Înainte p big Conform tabelului : ♦ valoarea specificităţii selectorului p — ; ♦ datorită prezenței selectorului de clasă, selectorul r yd are o valoare de specificitate de , , , ; ♦ Selectorul #header p big are o valoare de specificitate de , , , datorită selectoarelor de clasă și id În aceste exemple, ultimul selector are cea mai mare specificitate și, prin urmare, câștigă competiția -(C) Reîncărcați Carte de bucate CSS Hpmt Pnnt IPasswonl O TdKbfwlooy Books,Ttc oetterQ D Titlul paginii lorra IIap dolor sil inel consectetuer edlgltciai ulii Md diam nonummy nibh euismed tincidunt ut laoreet dolore mama aliquam erat voluuat Ut urisl eaim ad minim veniam quis ItStTBd КВГСІШІОО ІШШСОПУГ ШСІ|М!ІОЬШШ III SllQKlIp U CONUM^O Duli autam vel eum Irture dolor in la roloutie velit velit in la rolout vei Uium dolore ou fouBiat nulla ladllsls al vere orna et accumsan et lusto odlo digolssim qui Nandu praeaant tuptatiun rzrtl delantt augue duis dolore te tougatt nulla taclUsl Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum Iriure dolor in hendrerit in vulpucate velit esse mol estic consequat vel illum dolore eu feugiat nulla facilisis at vero cros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te fcugait nulla facilitati Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod Orez Regula CSS câștigătoare Discuţie Sursa regulilor CSS și ordinea lor de sortare ajută browserul Web să determine reguli care suprascriu alte reguli (și declararea ! important permite anumitor reguli să depășească alte reguli) Când aceste metode de detectare Gpava regulile câștigătoare eșuează, apare conflictul Specificația CSS are o modalitate gata de a gestiona astfel de conflicte - specificul regulii CSS în sine Cu cât o regulă CSS este mai specifică, cu atât este mai probabil ca regula să câștige (Notă Specificitatea în prezența unui selector universal este Valorile moștenite nu au nicio specificitate Există mai multe calculatoare interactive de specificitate CSS pentru a vă ajuta să determinați specificul unei reguli Un astfel de calculator poate fi găsit la http://www suzyit com/tools/specificity php Vezi si Articolul lui Eric Meyer despre specificitate la http://meyerweb com/eric/css/Iink-specificity html; Articolul lui Molly Holzschlag despre specificitatea în CSS și CSS la http://www molly com/ / / /css -and-css -specificity-clarified/ Cum se aplică diferite tipuri de foi de stil Problemă Trebuie să furnizați foi de stil pentru diferite tipuri de tipuri de suporturi, cum ar fi acustice (aurale), tipărite sau portabile (portabile) Decizie Creați foi de stil externe separate pentru diferite dispozitive de ieșire și denumiți-le în funcție de tipul de dispozitiv, de exemplu print css, screen css, handheld css Apoi utilizați elementul iipk cu tipul de dispozitiv de pe pagina Web pentru a face legătura la aceste stiluri O altă modalitate este să folosiți regula @media Următorul este textul fișierului print css: corp { font: pt Times, Georgia, șerif; înălțimea liniei: % } Fișier nou numit screen css: corp { font: px verdana, arial, sans-serif; înălțimea liniei: % Bazele CSS Apoi un alt fișier numit projection css: corp { font: px; înălțimea liniei: % } În continuare, pe pagina Web, faceți referire la aceste trei fișiere folosind următoarele rânduri din secțiunea de cap Fiecare link are propriul tip de dispozitiv de ieșire: clink rel="stylesheet" type="text/css" href="/css/projection css" media="projection" /> Pentru a seta reguli diferite pentru diferite tipuri de dispozitive în aceeași foaie de stil, puteți utiliza regula Omedia: { , } | mostenire Vezi proprietatile individuale Nu Visual 'border-top' 'border-right' 'border-bottom' 'border-Left' [ || || „culoare-chenar”] | mostenire Vezi proprietatile individuale Nu Visual Anexa Tabelul A (continuare) Nume Valori Valoare inițială Se aplică pentru (implicit: toate) Moștenit? Procentaj (implicit: N/A) Tipuri de ieșire 'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' | transparent Moștenesc Valoarea proprietății „culoare” Fără vizual 'border-top-style' 'border-right-style' * border-bottom-style' 'border-left-style' | moștenește niciunul Nu Visual 'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' | moștenire mediu Fără vizual 'border-width' { , } | mostenire Vezi proprietatile individuale Nu Visual 'border' [ || || >'culoarea-chenar-sus'] | mostenire Vezi proprietatile individuale Nu Visual „de jos” | | auto | moștenire auto Elemente poziționate Nu Raportat la înălțimea blocului container Vizual 'partea legendă' sus | jos | moștenește elementele de top „table-caption” Da Vizual 'clear' nici unul | stânga | dreapta ambele | moștenire niciun element Elemente la nivel de bloc Nici unul Vizual „clip” | auto | moștenire auto Elemente absolut poziționate Fără vizual 'culoare * | moștenire dependent de agentul utilizator Da Vizual Proprietăți CSS și completări personalizate Tabelul A (continuare) Nume Valori Valoare inițială Se aplică pentru (implicit: toate) Moștenit? Procentaj (implicit: N/A) Tipuri de ieșire „conținut” normal | niciunul | [ | | | attr( ) | citat deschis | citat apropiat | nici un citat deschis | fără-închide-ghilimele]+| moșteniți normal :before și :after pseudo-elemente Nici unul Toate „contra-increment” [cidentifier> ?]+| niciunul | moşteni nici unul Nici unul Toate 'contor-resetare' [ ?]+| niciunul | moşteni nici unul Nici unul Toate 'cursor' [[ ,]*[auto | cruce | implicit | indicator | muta | e-resize - ne-redimensionare | nw-resize | n-redimensionare | se-resize | sw redimensionare | s-redimensionare | w-redimensionare | text | așteaptă | ajutor | progres] ]| moștenire automat Da Vizual, interactiv 'direcție' Itr | rtl | moștenește Itr Toate elementele, vezi textul din carte Da Vizual afişare'inline | bloc | element din listă | rulare | bloc inline | masa | tabel inline | tabel-rând-grup | tabel-antet-grup | tabel-subsol-grup | rând de masă | tabel-coloană-grup | tabel-coloană | celula tabelului | table-caption |niciuna | mostenesc inline Nici unul Toate „celule goale” arată | ascunde | moșteniți arată Elementele „celula-tabel” Da Vizual „plutitor” stânga | dreapta | niciunul | moșteniți niciunul Toate Nici unul Vizual „familie-font” [[ | ] [, | ]*] moștenire Dependent de agentul utilizator Da Vizual Tabelul A (continuare) Nume Valori Valoare inițială Se aplică pentru (implicit: toate) Moștenit? Procentaj (implicit: N/A) Tipuri de ieșire 'font-size' | | | | moștenire mediu Da Relativ la dimensiunea fontului elementului părinte Vizual „stil font” normal | cursiv | oblic | mosteneste normal Da Vizual „varianta fontului” normal | majuscule mici | mosteneste normal Da Vizual „greutatea fontului” normal | bold | bold | lumina | | | | | | | | | mosteneste normal Da Vizual 'font' [['font-style'||'font-variant' | 'grosimea fontului']? „dimensiunea fontului”[/„înălțimea liniei”]? „familie-fontului”] | legenda | pictograma | meniu | caseta de mesaje | legendă mică | bara de stare | moștenire Vedeți proprietățile individuale Da Vedeți proprietățile individuale Vizual „înălțime” | | auto | moștenire automat Toate elementele, cu excepția elementelor inline nemobile, coloanelor din tabel și grupurilor de coloane Niciuna Vedeți textul din carte Vizual „stânga” | | auto | moștenire auto Elemente poziționate Nu Raportat la lățimea blocului container Vizual „spațiere între litere” normal | mosteneste normal Da Vizual „înălțime-linie” normal | | | | moșteniți normal Da Relativ la dimensiunea fontului elementului Vizual 'list-style-image' | niciunul | moștenește nici unul Elemente cu „afișare: element-listă” Da Vizual „poziție-stil-listă” în interiorul | afara | moșteniți în afara elementelor cu „display: list-item” Da Vizual Proprietăți CSS și completări personalizate Tabelul T (continuare) Nume Valori Valoare inițială Se aplică pentru (implicit: toate) Moștenit? Procentaj (implicit: N/A) Tipuri de ieșire disc „list-style-type” | cerc | pătrat| zecimală | zecimal-lea-zero | roman inferior | roman superior | greacă inferioară | latină inferioară | latină superioară | armean | georgian | alfa inferior | alfa superioară | niciunul Moștenesc disc Elemente cu „dispiay: list-item” Da Vizual 'list-style' ['list-style-type'|| 'poziția-stil-listă' || 'listă-stil-imagine' ] | moșteniți Vedeți proprietățile individuale Elemente cu „dispiay: list-item” Da Vizual 'margin-right' 'margin-left' | moștenire Toate elementele, cu excepția elementelor cu un tip de ieșire de tabel, dar nu a elementelor de tabel și de tabel inline Nu Raportat la lățimea blocului container Vizual 'margin-top' 'margin-bottom' | moștenire Toate elementele, cu excepția elementelor cu un tip de ieșire de tabel, dar nu a elementelor de tabel și de tabel inline Nu Raportat la lățimea blocului container Vizual „margină” { , } | moștenire Vedeți proprietățile individuale Toate elementele, cu excepția elementelor de tip tabel, dar nu a elementelor de tabel și de tabel inline Nu Relativ la lățimea blocului container Vizual 'max-height' | niciunul | moșteniți niciunul Toate elementele, cu excepția elementelor inline care nu sunt mobile, coloanelor din tabel și grupurilor de coloane Niciuna Vedeți textul din carte Vizual 'max-width' | | niciunul | moștenește niciunul Toate elementele, cu excepția elementelor inline care nu se pot deplasa, a rândurilor de tabel și a grupurilor de rânduri Niciunul În raport cu lățimea blocului container Vizual Anexa Tabelul A (continuare) Nume Valori Valoare inițială Se aplică pentru (implicit: toate) Moștenit? Procentaj (implicit: N/A) Tipuri de ieșire „înălțime minimă” | | moștenire Toate elementele, cu excepția elementelor inline nemobile, coloanelor de tabel și grupurilor de coloane Niciuna Vedeți textul din carte Vizual 'min-width' | | moștenire Toate elementele, cu excepția elementelor inline nemobile, rândurilor de tabel și grupurilor de rânduri Nici unul Relativ la lățimea blocului container Vizual „orfani” | moștenește elemente la nivel de bloc Da Vizual, paginat „culoare-contur” | inversează | moșteni inversare Nu vizual, interactiv 'stil-contur' | moștenire niciunul Nu Vizual, interactiv „lățime-contur” | Moștenire mediu Nu - Vizual, interactiv 'outiine' ['contur-culoare' || 'stil-contur 'II'lățime-contur'] | moșteniți Vedeți proprietățile individuale Nu Vizual, interactiv „debordare” vizibil | ascuns | scroii | auto | moștenește elemente vizibile la nivel de bloc, celule de tabel și elemente de bloc inline Nu Vizual 'padding-top' 'padding-right' 'padding-bottom' 'padding-left' | moștenire Toate elementele, cu excepția elementelor de tip tabel, dar nu a elementelor de tabel, tabel inline și celule de tabel Nu Relativ la lățimea blocului container Vizual Proprietăți CSS și completări specializate Tabelul A (continuare) Nume Valori Valoare inițială Se aplică pentru (implicit: toate) Moștenit? Procentaj (implicit: N/A) Tipuri de ieșire 'padding' { , } | moștenire Vedeți proprietățile individuale Toate elementele, cu excepția elementelor de tip tabel, dar nu a elementelor de tabel, tabel inline și celule de tabel Nu Relativ la lățimea blocului container Vizual „întreruperea paginii după” automat | mereu | evita | stânga I dreapta | moștenire automat Elemente la nivel de bloc Nu vizual, paginat „întreruperea paginii-înainte” automat | mereu | evita lasat | dreapta | moștenire automat Elemente la nivel de bloc Nu vizual, paginat 'page-break-inside' evita automat mosteneste automat Elemente la nivel de bloc Da Vizual, paginat „poziție” static | relativ | absolut | fixat moștenire static Fără vizual „ghilimele” [ ]t|niciunul | moștenire dependent de agentul utilizator Da Vizual „dreapta” | | auto | moștenire auto Elemente poziționate Nu Raportat la lățimea blocului container Vizual 'table-layout' automat | S-a corectat moștenire automată a elementelor „tabel” și „tabel în linie” Fără vizual „text-align” stânga dreapta | centru | justificați moștenire „stânga” dacă „direcția” este „ltr”; „dreapta” dacă „direcția” este „rtl” Elemente la nivel de bloc, celule de tabel și casete inline Da Vizual 'text-decor' niciunul | [subliniază | l supraliniază || line-through | clipire] | moștenește niciunul Nu (vezi textul) Vizual 'text-indent' | | moștenește Elemente la nivel de bloc, celule de tabel și casete inline Da Relativ la lățimea blocului container Vizual Anexa Tabelul A (sfârșit) Nume Valori Valoare inițială Se aplică pentru (implicit: toate) Moștenit? Procentaj (implicit: N/A) Tipuri de ieșire 'text-transform' cu majuscule | litere mari | literă mică | niciunul | moștenește niciunul Da Vizual 'sus* | | auto | moștenire auto Elemente poziționate Nu Raportat la înălțimea blocului container Vizual 'unicode-bidi' normal | încorpora | bidi override | moștenește normal Toate elementele, dar vezi textul Nici unul Vizual linia de bază „aliniere verticală” | sub | super | sus I text-sus | mijloc | jos I text-jos | I | moșteniți elementele inline și „celulă de tabel” ale liniei de bază Nu Relativ la valoarea „înălțimii liniei” a elementului însuși „vizibilitate” vizibil | ascuns | coiiapse | mosteneste vizibil Da Vizual „spațiu alb” normal | pre | nowrap | pre-împachetare | pre-linie | mosteneste normal Da Vizual „văduve” | moștenește elemente la nivel de bloc Da Vizual, paginat „lățime” | | auto | moștenire automat Toate elementele, cu excepția elementelor inline care nu sunt mobile, rândurilor de tabel și grupurilor de rânduri Nici unul Relativ la lățimea blocului container Vizual 'spațierea cuvintelor' normal I | mosteneste normal Da Vizual 'z-index' auto | | moștenire auto Elemente poziționate Fără vizual CSS Proprietăți și completări specializate Tabelul A Adăugiri la CSS dezvoltate de Microsoft Nume Valori Valoare inițială Se aplică pentru (implicit: toate) Moștenit? Procent (implicit: N/A) Tip de ieșire „fiiter” Consultați http://tr im/filterproperty N/A (nedefinit) Fără proprietăți de filtru „overflow-x” vizibil | scroii | ascuns | vizibil automat (cu excepția elementului textarea, caz în care valoarea inițială devine ascunsă) Fără vizual „overflow-y” vizibil | scroii | ascuns | vizibil automat (cu excepția elementului textarea, caz în care valoarea inițială devine automată) 'scrollbar- dlight-color' Culoarea implicită Element Scrollbar Da Vizual 'scrollbar-arrow-color' Culoarea implicită Element de scrollbar Da Vizual 'scrollbar-base-color' Culoarea implicită Element Scrollbar Da Vizual 'scrollbar-darkshadow-color' Culoare implicită Element Scrollbar Da Vizual 'scrollbar-face-color' Culoarea implicită Element de scrollbar Da Vizual 'scrollbar-highlight-color ' Culoarea implicită Element de scrollbar Da Vizual 'scrollbar-shadow-color' Culoarea implicită Element Scrollbar Da Vizual „zoom” normal | | normal Nu Da Vizual 'background-position-x' | | stânga centru | dreapta % Nu Da Vizual Anexa Tabelul A (sfârșit) Nume Valori Valoare inițială Se aplică (implicit: toate) Moștenit? Procent (implicit: N/A) Tip de ieșire „poziție-fond-y” | | sus I centru | jos % Nu Da Vizual 'ime-mode' auto I activ | activ | dezactivat automat Da Vizual modul 'layout-grid'| tip | linie | char ambele loose nici unul nici unul Da Vizual 'layout-grid-char' | | niciunul | auto nici unul Nu Da Vizual 'layout-grid-line' | | niciunul | auto nici unul Nu Da Vizual 'layout-grid-mode' ambele | niciunul | linie | char ambele Da Vizual 'layout-grid-type' liber | strict | fix liber Da Vizual „rupere de linie” normal | strict normal Da Vizual „text-autospace” niciunul | ideograf-alfa | ideografic-numeric | ideograf-paranteză I ideograf-spațiu nici unul Vizual „text-justify” automat | distribuie | distribuie-toate-liniile | distribuie-centru-last | inter cluster | inter-ideograf | intercuvânt | kashida | ziar auto Da Vizual „text-kashida-space” | moștenire % Da Vizual „poziție-subliniere-text” de mai sus | mai jos | auto | auto-poz auto Da Vizual „despărțire de cuvânt” normal | rupe toate | păstrează-toate normal Da Vizual „înfășurare de cuvinte” normal | break-word normal Da Vizual „modul de scriere” Ir-tb | tb-rl Ir-tb Fără vizual Proprietăți CSS și completări specializate Tabelul A Adăugări de proprietăți CSS pentru produsele Mozilla Nume Valori Valoare inițială Se aplică pentru (implicit: toate) Moștenit? '-moz-aspect' nici unul | butonul | nasture-mic | caseta de selectare | checkbox-container | caseta de selectare-mic | dialog | meniu listbox | element de meniu | lista de meniu | butonul meniului | menulist-textfield | bara de progres | radio | container radio | radio-mic | redimensionare | bara de defilare | bara de defilare-buton-jos | bara de derulare-buton-stânga | Scrollbarbutton dreapta | bara de defilarebuton sus | scrollbartrack-orizontal | scroll-bartrack-vertical | separator | bara de stare | fila | filă-margine-stânga | panouri cu file | câmp text | bara de instrumente | butonul din bara de instrumente | cutie de instrumente | tooltip | treeheadercell | treeheadersortarrow | treeitem | treetwisty | treetwistyopen | vedere arbore | fereastra niciuna Nu '-moz-binding' uri | niciunul niciunul Nu chenar '-moz-background-clip' | chenar de umplutură Nr „-moz-background-inline-policy” caseta de delimitare | continuu | Elemente în linie continue din fiecare cutie Nr chenar '-moz-background-origin' | căptușeală | umplutură de conținut nr '-moz-background-image' [ | niciunul] | [număr | ] [întindere | repeta | rotund] nici unul | [ | ] [ ] [întindere | repeta | rotund] nici unul Nu '-moz-border-bottom-culos' '-moz-border-left-culos' '-moz-border-right-culos' '-moz-border-top-culos' | transparent Nedefinit Nr '-moz-border-radius' | Nu Anexa Tabelul A (continuare) Nume Valori Valoare inițială Se aplică pentru (implicit: toate) Moștenit? '-moz-horder-radius-bottomleft' '-moz-border-radius-bottomright' '-moz-border-radius-topright' ' -moz-border-radius-topright' | Nu '-moz-box-align' începe | centru | sfârşitul | linia de bază | stretch stretch Elemente cu o valoare de afișare CSS de -moz-box sau -moz-inline-box Nr '-moz-box-direction' normal | inversați elementele normale cu afișajul CSS setat la -moz-box sau -moz-inline-box Nr '-moz-box-flex' | > Elemente cu afișaj CSS setat la -moz-box sau -moz-inline-box Nr '-moz-box-orient' orizontal | vertical orizontal Elemente cu o valoare de afișare CSS de -moz-box sau -moz-inline-box Nr '-moz-box-pack' începe | centru | sfârșit Justific start Elemente cu o valoare de afișare CSS de -moz-box sau -moz-inline-box Nu '-moz-box-shadow' nici unul | [ | ? ] | nu mostenesc nici unul Nr „-moz-box-sizing” caseta de conținut | border-box | padding box content-box Nr „-moz-image-region” pentru valorile rect(), rect constă din patru elemente de imagine XUL de lungimi automate calculate și pseudo-elemente :-moz-tree-image, :-moz-tree-twistyH :-moz-tree-checkbox da XUL - XML User Interface Language, limbaj XML pentru interfața utilizator — Aprox pe Proprietăți CSS și completări personalizate Tabelul A (sfârșit) Nume Valori Valoare inițială Se aplică pentru (implicit: toate) Moștenit? „-moz-opacity” (sau mai puțin) inversare inversare Nr '-moz-outline-offsef No '-moz-outline-radius' Nr '-moz-outline-radius-bottomleft' '-moz-outline-radius-bottomright' '-moz-outline-radius-topright' '-moz-outline-radius-topright' Nu '-moz-outline-style' niciunul | punctat | punctat | solid dublu canelura creastă încadrare început niciuna Nr '-moz-outline-width' mediu Nr „-moz-user-focus” Ignorați normal „-moz-outline-input” niciunul activat dezactivat moștenire niciunul Da '-moz-outline-select' niciunul text -moz-none Nu '-moz-window-shadow' implicit nici unul implicit Elemente care formează propriile ferestre, cum ar fi fereastra, panoul Nici unul Anexa ANEXA Selectoare, pseudo-clase și pseudo-elemente CSS Această anexă conține trei tabele de referință care arată cum se aplică stiluri elementelor corespunzătoare În tabel PS I include selectoare de specificații CSS Selectoarele ajută la indicarea browserului Web în ce părți ale paginii să aplice declarațiile CSS (Notă În fila coloana „Șablon general” A , c, r și s reprezintă selectoare de tip Tabelul A conține o listă de pseudo-clase O pseudo-clasă este o clasă ascunsă pe care un browser Web o folosește pentru a se referi la propria sa clasă De exemplu, folosind pseudo-clase, puteți defini proprietăți ale diferitelor stări: vizitat, activ și hover, linkuri găsite peste tot În tabel PZ Z oferă o listă de pseudo-elemente Similar ca natură cu o pseudo-clasă, un pseudo-element învelește conținutul unei pagini Web în etichete ascunse și apoi aplică stiluri acelor elemente Deoarece structura unor astfel de elemente seamănă mai mult cu un element tip decât cu o clasă, ele sunt numite pseudo-elemente Tabelul A Selectoare CSS Selector General Model Descriere Exemplu Universal (universal) * Combinat cu orice element * { text-decor: none; } Tur (tip) cu Combină cu orice element; în exemplul de mai sus cu toate elementele h h { font-weight: normal; } Descendent C RS Potrivește orice element s care este un copil al unui element R, un copil al elementului cu div#content p em { background-color: yellow; } Copil (copil) cu > S Selectează orice element s care este un copil al unui element cu li > ul { list-style-type: circle;} Frate adiacent C + S Selectează orice element imediat după elementul cu div#content+p { text-indent: ;} Anexa Tabelul A (sfârșit) Selector General Model Descriere Exemplu Gruparea C, R, S Selectoarele multiple folosesc aceleași declarații hi, h , h , h { culoare: #Ocf;} Ciass (de clasă) C classR Selectează orice element c care conține un atribut ciass cu o valoare classR img content { padding: px; chenar: Ipx negru solid; } ID (identificator) C#idR Selectează orice element cu care conține un atribut id cu o valoare idR div#content { culoare: # ;} Selector de atribute C[atribut] Selectează orice element cu atributul a[link] {text-decoration: none;} Selector de atribute C[attribute=" valueR"] Selectează orice element din c care conține un atribut cu o valoare valueR input[type="text"] { width: %; } Selector de atribute C[attribute~= "valueR"] Selectează orice element c care conține un atribut a cărui valoare este o listă de cuvinte separate prin spațiu, dintre care unul se potrivește cu valoarea valueR div advertisement form[class~="login"] { plutește la stânga; margine-stânga: px; } Selector de atribute C[attributel ="valueR"] Selectează orice element c care conține un atribut a cărui valoare este o listă de cuvinte separate prin cratime, primul dintre care se potrivește cu valueR value warning[lang="uk"]:after { content: "Bley!"} Tabelul A CSS Pseudo-clase Pseudo-clasa Șablon general Descriere Exemplu :first-child C:first-child Se potrivește cu elementul c, primul copil al altui element divs p:first-child {culoare: alb; culoare de fundal: roșu } :link C:link Potrivește orice link de element nevizitat cu a:link {text-decoration: none; } :visited C:visited Potrivește orice link de element vizitat cu a:visited {font-weight: normal; } Selectoare, pseudo-clase și pseudo-elemente CSS Tabelul A (sfârșit) Pseudo-clasa Șablon general Descriere Exemplu :hover C:hover Corespunde unui element c selectat de utilizator (de obicei prin deplasarea pictogramei cursorului peste un link) dar neactivat încă a:hover { background-color: orange; } :activ C:activ Corespunde elementului c activat de utilizator a:activ { culoare: verde; } :focus C:focus Potrivește elementul cu focalizarea (de obicei un câmp de introducere a formularului) input:focus {culoare-fond: #F F D ;} :lang C:lang(R) Potrivește elementul c folosind limbajul rp:lang(en) {font-weight: bold;} Tabelul PZ Z Pseudo-elemente CSS Pseudo element Model general Descriere Exemplu :first-line C:first-line Elementul c selectează prima linie de text h +c:fiist-line {culoare: # ;} :first-letter C:first-letter Selectează prima literă din elementul c hl:first-letter { font-size: %; text-transform: minuscule; } :before C:before Plasează conținutul generat înaintea elementului, aplicat cu conținutul PROPERTY ul tracklisting li: before { content: "Titlul melodiei: ";} :after C:after Plasează conținutul generat după element, aplicat cu proprietatea conținut div#footer p copyright:după {conținut: „Dublu adevărat!”;} ANEXA Selectoare și pseudo-clase CSS Deși lucrările la specificația CSS sunt încă în desfășurare la momentul scrierii acestui articol, unii dezvoltatori de browsere încep să accepte proprietăți din specificația neterminată Acest apendice oferă o listă a noilor selectori CSS pentru referință Consultați Anexa (care conține selectoare CSS ) împreună cu această listă pentru a afla exact ce modele de stilare aveți la dispoziție În tabel A descrie un nou selector CSS , selectorul generalizat de elemente adiacente (Notă În fila coloana „Șablon general” A , c, r și s reprezintă selectoare de tip Tabelul A Noul selector CSS Selector General Model Descriere Exemplu Selector generic de elemente adiacente CR Se potrivește cu orice element r precedat de un element cu #conținut ~ img { padding: px; chenar px negru solid;} Tabelul A conține o listă de noi selectori de atribute Acești selectori extind capacitatea de a selecta elemente dintr-un document pe baza unei valori de atribut și chiar a unui mic subset al acelei valori Tabelul A Selectori de atribute CSS Selector General Model Descriere Exemplu Selector de atribute C[attributeA= "valueR"] Selectează orice element al lui c care conține un atribut a cărui valoare începe cu valueR Img[altA="mugshot"] {width: lOOpx;} Selector de atribute C[attribute$= "valueR"] Selectează orice element din C care conține un atribut a cărui valoare se potrivește exact cu C valueR Img[alt$="photo"] {border: yurx solid red;} Selectoare CSS și Pseudo-clase Tabelul A (sfârșit) Selector General Model Descriere Exemplu Selector de atribute C[atribut*= "valoareR"] Selectează orice element al lui c care conține un atribut a cărui valoare conține subșirul valoareR Img[alt*=”executiv"] { } Selector de atribute C[atribut|= "valoareR"] Selectează orice element c care conține un atribut a cărui valoare conține valoareR într-o listă de cuvinte separate prin cratime Img[alt|="non"] {opacitate: ;} În tabel A este o listă de pseudoclase structurale Acestea vă permit să selectați elemente în funcție de ordinea lor De exemplu, puteți specifica elemente de listă ii cu numere impare folosind selectorul nth-chiid în loc de selectorul de atribute ciass Tabelul A Pseudo-clase structurale CSS Pseudo-clasa Șablon general Descriere Exemplu :last-child C:last-child Se potrivește cu elementul c, ultimul copil al altui element divs p:last-child {culoare: alb; culoare de fundal: negru } :target C:target Se potrivește cu elementul c când este activată o legătură de fragment (de ex #section) #section:target {background-color:yellow;} :enabled C :enabled Potrivește elementul cu dacă acesta este în starea activat activat input [type="age" ]: enabled {background-color: green;} :disabled C:disabled Se potrivește cu elementul c dacă este dezactivat input[type="parola"]:disabled {background-color: # ;} :root :root Se potrivește cu elementul rădăcină al documentului; în documentele HTML , acesta este elementul html :root {display: block;} :nth-child() C:nth-child(an+b) Potrivește elementele din arborele documentului care sunt precedate de un număr specificat de frați; dacă n este un număr întreg, :nth-child(an+b) se va potrivi cu un element precedat de an+b- frați tr:nth-child( n) {background-color: # ff ;} bbb Anexa Tabelul A (sfârșit) Pseudo-clasa Șablon general Descriere Exemplu :nth-last-child() C:nth-last-child(an+b) Potrivește elementele din arborele documentelor care sunt urmate de un anumit număr de frați; dacă n este un număr întreg, :nth-last-chiid(an+b) se va potrivi cu un element după care există nth-last-chiid(- n) frați tr:nth-last-child(- n) { background-color : # ff ;} :nth-of-type C:nth-of-type (an+b) Potrivește elemente din arborele document care sunt precedate de un anumit număr de frați de același tip; dacă n este un număr întreg, :nth-of-type(an+b) se va potrivi cu un element precedat de n+b- frați de același tip tr:nth-of-type( n) {float:right;} :nth-last-of-type C:nth-last-of-type(an+b) Potrivește elementele din arborele de documente care au după ele un anumit număr de frați de același tip; dacă n este un număr întreg, :nth-iast-of-type(an+b) se va potrivi cu un element după care există an+b- frați de același tip tr:nth-last-of-type( n) { plutire: dreapta;} :first-of-type C:first-of-type Potrivește primul copil al unui element cu tipul dat p:first-of-type {font-weight: bold;} :last-of-type C:last-of-type Potrivește ultimul copil al unui element cu tipul dat p:last-of-type {background-color: black;} :only-child C:only-child Potrivește un element copil dacă este singurul copil al elementului său părinte li:only-child {font-size: em;} :only-of-type C:only-of-type Potrivește un element copil dacă este singurul copil al elementului său părinte li:only-of-type {font-size: em;} :empty C:empty Se potrivește cu orice element fără copii *:empty {background: red; inaltime:lOOpx;} :not() C:not(R) Se potrivește cu toate elementele din elementul c, cu excepția elementelor r *:not(:hover) {opacitate: ;} ANEXA S Elemente de formă de stil Formularele au un impact mare asupra stilului nostru de viață de zi cu zi, care este indisolubil legat de internet și de comerțul electronic, motiv pentru care ocupă un loc proeminent în designul web Dezvoltatorii web doresc să controleze aspectul elementelor de formular în designul paginii lor Web, astfel încât acestea să fie mai atractive pentru vizitatori, în același timp fiind în concordanță cu restul designului Problema este că diferitele browsere web redau elementele de formular în mod diferit Chiar și în cadrul aceleiași versiuni a browserului web, elementele formularului pot arăta diferit pe sisteme de operare diferite Această anexă descrie modul în care browserele web redau controalele de formular în mod inconsecvent Deoarece oferă o prezentare generală a browsere web și de proprietăți CSS, împreună cu elemente de formular HTML, anexa completă este prea lungă pentru versiunea tipărită a cărții L-am pus la dispoziție pe internet Versiunea completă în limba engleză a Anexei (Apendicele E) poate fi găsită la http://oreilly com/catalog/ / (selectați linkul Exemple) Index de subiect A la Adobe BrowserLab Adobe Dreamweaver Ajax Knoppix L în metoda LIR Boot Câmp BrowserCam BrowserShots Analizor raport de contrast al luminozității Lynx Lynx Viewer c N CSS , Nifty Comers Cube Dp Debian Linux DOCTYPE Document Object Model, DOM Parailels Desktop Metoda Phark Metoda Pxy Fișier PNG E Prototype Framework Secvența de evacuare Q F Modul Quirks Metoda FIR , , s G Sans șerif GIF Scriptaculos H u HyperText Markup Language URI , , V Internet Explorer pentru Windows , VMWare Workstation Index de subiect W Fonturi Web Safe Wine YUI Resetează CSS ȘI Poziționare absolută , , Conținut generat automat Foaie de stil alternativă Alpha transparență , Dispoziție asimetrică Atribut alt salvare automată citatul ciass controale Despre id Despre substituentul Despre posterul Despre rezultate Oh titie , B Linia de referință Linia de bază a fontului Biblioteca jQuery Container bloc Scrisoarea inițială Bookmarklet în Validator , Foaie de stil externă Foaie de stil internă Stiluri inline Anunțul Justificați Inițiala proeminentă G Conținut generat Titluri de diferite niveluri Înțeles și ID fragment Harta imagine la Foi de stil în cascadă , Kerning Cheile de acces , vevent clasa Coloane cu lățime fixă , Selector de context Continutul , Cursorul m Marker , Lista cu marcatori Spațiere între linii Metodă Gilder - Levin vârf de munte înlocuiri de imagini usi glisante Microformat hCalendar hCard Modul de rescriere a modului Index de subiect n Atribuirea dispozitivelor de ieșire despre Nume generic de familie de fonturi Backspace , Încheierea textului Anunț important , Unități relative liniuța P Bara de instrumente Imaginea Paralaxa Model plutitor , , Câmpul căutare , Ordinea de afișare a coloanelor , Link pierdut regulă @import @media , LV/HA Scrisoarea crescută Pseudo-clasa , vizitat : focus , , , : peste , , , , , : ultimul de tip rlink :nu :target Pseudo coloane Pseudo element , , ::moz-selection ::selectia :după , , : înainte de , , : prima literă : prima linie R Separator Caseta , Extensii de limbaj HTML Modul de compatibilitate inversă cu Proprietatea animație-durată animație-iterație-număr animație-nume fundal , fundal-atașament , culoare de fundal , imagine de fundal , , fundal-poziție , , , , fundal-repetare , , , dimensiunea fundalului hotar chenar-jos frontieră-colaps chenar-imagine hotar-raza distanță între granițe chenar stil chenar top jos caseta umbra ceag , culoare cuprins , contra-increment resetare contor cursor afișează , , , , celule goale fiiter , font font-familie , dimensiunea fontului , , stil de font greutate font imagine-redare a rămas spațiere dintre litere linie-înălțime , stil de listă , list-style-image Index de subiect list-style-position iist-style-type , margin max-width moz-image-rect -ms-interpolation-mode opacitate , overflow întrerupere de pagină înainte de poziție , , , , text-align , text-decor text-indent , , , text-overflow text-overflow- tranziție , tranziție-întârziere tranziție-durată tranziție-proprietate vertical-align vizibilitate lățime word-spacing word-wrap z-index , z-index stenografie , Selector Link , , Legături de lanț Tag Shadow Tipuri media Urmărire Y Selector universal Comentarii condiționate f Filtre CSS Imagine de fundal , contoare() -moz-linear-gradient() -moz-radial-gradient() funcția de sincronizare-tranziție -webkit-gradient() url() X hosting g Google :nth-child() , inth-child (impar) ID , , , , atribut , , clasa , , , , , , , , , , subcopil , , , Descendent direct Vecin , Tip , , Echivalent Unicode de evacuare hexazecimal Font sans-serif serif e Sintaxă CSS Rotunjire colț Specificație CSS , Specificitatea regulii Liste Lista de definiții Mijloc Cititor de ecran Element anchor audio biockquote , body Index de subiect Element (cont ) puternic , legendă stil dialog sub em , sup cap , tabel titlu corp html td HTML th , ore la iframe titie img tr intrare ul formular video legendă set de câmpuri li bloc nivel noscript pagini ol Efect de tăiere margini opțiunea paragraful i q selectați Limbajul de marcare hipertext sursa Ancora DESPRE REILLY® CSS PROGRAMARE RETETE Ediția a III-a Cartea vă învață cum să rezolvați problemele reale cu care vă confruntați când lucrați cu CSS Oferă sute de exemple practice de utilizare a CSS pentru a formata pagini web și conține exemple de cod pe care le puteți aplica imediat În carte veți găsi tot ce aveți nevoie, de la elementele de bază la trucuri și trucuri complexe de programare Fiecare exemplu arată cum să personalizați soluția propusă pentru a se potrivi nevoilor dumneavoastră, iar fiecare capitol conține un exemplu de design care implementează subiectele discutate în capitol Veți afla despre comportamentul celor mai recente browsere web, inclusiv IE , Firefox , Safari și Google Chrome, și despre cum să rezolvați diferențele în modul în care acestea vă afișează paginile Web Organizată ca o referință utilă, a treia ediție va fi o referință excelentă pentru oricine lucrează cu CSS „Cartea excelentă a lui Christopher oferă soluții la majoritatea problemelor CSS cu care te confrunți în proiectele tale zilnice Web, economisind timp și frustrare Autorul, unul dintre cei mai deștepți profesioniști care lucrează activ, își cunoaște cu adevărat lucrurile ” Chris Mills de la Opera Software În această carte: • să învețe elementele de bază, inclusiv structura regulilor CSS; • lucrul cu tipografia Web și aspectul paginii; • creați efecte vizuale pentru imagini și alte elemente ale paginii; • învățați cum să personalizați liste, formulare și tabele; • proiectează o navigație eficientă și creează link-uri personalizate; • obțineți originalitatea prin combinarea CSS cu JavaScript; • să învețe tehnici utile de identificare și depanare; • Explorați proprietățile HTML și CSS Christopher Schmitt, autor a mai multor cărți despre design web, co-lider al Adobe Task Force și membru al Education Task Force al Web Standards Project, lucrează pe web din INIȚIALĂ MEDIU ÎNALTĂ Se recomandă familiaritatea cu HTML și interfețele Web bhv BHV-Petersburg , Sankt Petersburg, Izmailovsky pr , E-mail: mail@bhv ru Internet: www bhv ru Tel : ( ) - - Fax: ( ) - - editie ruseasca , Moscova Shelepikhinskaya emb , E-mail: info@rusedit com Internet: http://www rusedit com Tel /fax ( ) - - 